flexible.js 原理

  • flexible.js 实现原理。

flexible.js 2.0 分支的源码并不多,总共不到 50 行,下面先分析每段代码的用处:

WARNING

flexible.js 官方已不在维护,目前推行 vw 适配方案,本文只是为了分析它的原理。

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

上面代码是一个 IIFE(立即执行)函数,当浏览器解析完这个函数后会立即执行。使用 IIFE 的原因在于隔离作用域,不至于污染全局作用域。IIEF 传入 window 和 document 参数可以减少作用域的查找,同时有也利于代码混淆。关于 IIFE 的更多用处请浏览 IIFE详解

var docEl = document.documentElement

获取文档的根节点(html 标签)。

var dpr = window.devicePixelRatio || 1

上面的代码是获取设备的 DPR,如未获取到默认设为 1。DPR 指的是设备物理像素和设备独立像素的比例,DPR >= 2 以上的为视网膜设备。window.devicePixelRatio 的支持情况请在 can i use 查看。

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

上面的代码从函数名可以看出是用于设置 body 字体大小,这个函数会在 DOM 加载完成后调用,body 字体大小会被设置为 12 倍 DPR 像素。不过个人感觉下面的写法更简洁:

function setBodyFontSize () {
    document.addEventListener('DOMContentLoaded', function(){
        document.body.style.fontSize = (12 * dpr) + 'px'
    })
}

DOMContentLoaded 事件会在 DOM 内容加载完毕时触发,无需等待文档中的外部资源(image、video)载入。关于页面生命周期请浏览页面生命周期

WARNING

issues 看来设置 body size 似乎会造成怪异现象,我之前也确实出现过字体在一瞬间从大变小的问题。关于这段代码的用途请看官方的解释

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

上面的代码是将根节点的字体大小设置为浏览器可视区域宽度的 10%,也就是相当于 1rem 的大小。

window.addEventListener('resize', setRemUnit)

上面的代码会当浏览器窗口大小改变时重新设置根节点的字体大小。

window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
})

上面的代码是会在浏览器前进后退到当前网页时触发,这样做的目的在于解决浏览器的“往返缓存”问题。关于浏览器的往返缓存请浏览 浏览器前进/后退缓存(BF Cache)

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

上面的代码用于检测分辨率大于等于 2 的设备中的浏览器是否支持 0.5 px,如果支持则在 html 标签在添加 hairlines 类。其思路是通过设置一个 div 元素的 border 为 0.5px,然后获取这个 div 元素的高度,如果高度为 1 则表示当前浏览器支持 0.5px 写法。这段代码的是为了编写 1px 的兼容代码:

.hairlines .bb{
  border-bottom:0.5px !important;
}

总结

从上面的分析可以看出 flexible.js 主要是通过动态辨别设备的 DPR 设置根节点的字体大小,并搭配能跟随根节点字体大小而改变大小的 rem 单位来实现在不同终端适配的。

Last Updated: 9/9/2020, 10:08:48 PM