Propiedades de la serie cilent

contorno

propiedad	efecto
clientTop, clientLeft	El tamaño del borde izquierdo
clientWidth, clientHeight	Anchura y altura, que comprende relleno solamente, no incluyendo la frontera

funcionar de inmediato

• Ejecuta inmediatamente después de la creación, se creará un ámbito independiente, para evitar conflictos de nombres
• Hay (function () {}) () y (function () {} ()) dos formas
• El primer parámetro se utiliza para establecer un soporte, el segundo soporte de argumentos de entrada, la función se puede escribir en paréntesis inmediatamente dentro o fuera de la externa

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

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

Taobao flexible.js análisis código original

(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))