淘宝flexible.js源码分析

---

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

废话少说，直接上代码

(function flexible (window, document) {var docEl = document.documentElementvar dpr = window.devicePixelRatio || 1// adjust body font sizefunction setBodyFontSize () {if (document.body) {document.body.style.fontSize = (12 * dpr) + 'px'}else {document.addEventListener('DOMContentLoaded', setBodyFontSize)}}setBodyFontSize();// set 1rem = viewWidth / 10function setRemUnit () {var rem = docEl.clientWidth / 10docEl.style.fontSize = rem + 'px'}setRemUnit()// reset rem unit on page resizewindow.addEventListener('resize', setRemUnit)window.addEventListener('pageshow', function (e) {if (e.persisted) {setRemUnit()}})// detect 0.5px supportsif (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.documentElementvar dpr = window.devicePixelRatio || 1

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

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

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

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

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

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

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

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