淘宝flexible.js源码分析

flexible.js是基于rem最主要的布局适配

废话少说，直接上代码

(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

 
  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  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))

• 首先整个flexible是一个立即执行函数
  可见代码如下

(function flexible (window, document) {
	...
}(window, document))

立即执行代码的格式有两种
(function(){})()
(function(){}())
淘宝flexble用的是第二种

• 第一行的docEl变量拿到的是整个html标签
  der变量返回的是物理像素比，PC端的物理像素比是1，而移动端每个手机屏幕尺寸不一样，返回的值也就不同；能通过devicePixelRatio拿到就拿到，拿不到默认给1

  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

设置body的字体大小
找到body，然后设置字体大小为21*物理像素比+px
if 和 else是兼容在头部引入和尾部引入都能正常跑

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

js核心把整个html的尺寸划分成十份，然后加字体大小和单位

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

当页面尺寸发生变化时重新设置rem
pageshow，重新加载页面事件，这个函数是为了防止火狐的“往返缓存”
e.persisted判断是否是页面缓存触发的事件，如果是，页面会重新加载

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

检测是否支持0.5像素，因为有些移动端不支持0.5像素的写法

  // detect 0.5px supports
  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)
  }