cilentシリーズのプロパティ

アウトライン

プロパティ	効果
clientTop、clientLeft	左境界線のサイズ
clientWidth、clientHeight	国境を含むだけでなく、パディングを含む、幅と高さ、

ファンクションすぐ

• 作成後すぐに実行され、それが名前の競合を避けるために、独立したスコープを作成します。
• （関数（）{}）（）と（関数（）{}（））は、2つの形態があります
• 最初のパラメータは、ブラケット、機能がすぐ内側または外側の外側括弧内に書き込むことができる第2のブラケットの入力引数を設定するために使用され

(function() {
	console.log('hello')
}())

(function() {
	console.log('world')
})()

淘宝網は、元のコード分析をflexible.js

(function flexible(window, document) {
    // 获取的html根元素用document.documentElement
    var docEl = document.documentElement

    // dpr物理像素比，支持用windows.devicePixelRation获取则返回，否则返回1
    var dpr = window.devicePixelRatio || 1

    // 设置body的字体大小
    function setBodyFontSize() {
        // 代码由上往下执行，如果页面中已加载body元素 就设置body的字体大小
        //获取body用document.body
        if (document.body) {
            // 设置为物理像素比的12倍
            document.body.style.fontSize = (12 * dpr) + 'px'
        } else {
            // 如果页面中未加载body元素，则等着页面DOM元素加载完毕再去设置body的字体大小
            document.addEventListener('DOMContentLoaded', setBodyFontSize)
        }
    }
    setBodyFontSize()

    //设置html元素的文字大小为视口宽度的十分之一
    function setRemUnit() {
        // html元素的clientWidth就是视口宽度
        var rem = docEl.clientWidth / 10
        docEl.style.fontSize = rem + 'px'
    }
    setRemUnit()

    //当页面尺寸发生变化时，调用setRemUnit重新设置rem
    window.addEventListener('resize', setRemUnit)

    // pageshow指重新加载页面触发的事件
    // load同样指页面加载触发的事件，但火狐中有往返缓存，后退时无法刷新页面，所以不使用load
    window.addEventListener('pageshow', function(e) {
        // e.persisted 返回的是true，说明页面是从缓存中取得，也需要从新计算一下rem 的大小
        if (e.persisted) {
            setRemUnit()
        }
    })

    // 移动端浏览器不支持0.5像素时的写法
    if (dpr >= 2) {
        var fakeBody = document.createElement('body')
        var testElement = document.createElement('div')
        testElement.style.border = '.5px solid transparent'
        fakeBody.appendChild(testElement)
        docEl.appendChild(fakeBody)
        if (testElement.offsetHeight === 1) {
            docEl.classList.add('hairlines')
        }
        docEl.removeChild(fakeBody)
    }
}(window, document))