淘宝flexible.js源码分析

淘宝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)
  }
上一篇:IDEA提示“Unmapped Spring configuration files found.Please configure Spring facet.”解决方法


下一篇:3D建模场景怎么做?