lib-flexible源码读后感

摘要：接下来的重头戏来了，这个库的核心函数。他的功能是首先获得设备上元素的宽度值，通过。换句话说，这个像素值是手机屏幕能到达的最大宽度在考虑以后，如果有宽度超过的情况，则说明该网页被显示在超过的大屏安卓机端上。

生产项目中，关于移动端设备匹配的问题，一直在使用手淘团队的flexible解决方案。
今天让我们来看一下大名鼎鼎的flexible的源码是什么样子的。

;(function(win, lib) {
    var doc = win.document;
    ......     //此处声明变量的代码省略
    
    if (metaEl) {
        console.warn("将根据已有的meta标签来设置缩放比例");
        var match = metaEl.getAttribute("content").match(/initial-scale=([d.]+)/);
        if (match) {
            scale = parseFloat(match[1]);
            dpr = parseInt(1 / scale);
        }
    } else if (flexibleEl) {
        var content = flexibleEl.getAttribute("content");
        if (content) {
            var initialDpr = content.match(/initial-dpr=([d.]+)/);
            var maximumDpr = content.match(/maximum-dpr=([d.]+)/);
            if (initialDpr) {
                dpr = parseFloat(initialDpr[1]);
                scale = parseFloat((1 / dpr).toFixed(2));    
            }
            if (maximumDpr) {
                dpr = parseFloat(maximumDpr[1]);
                scale = parseFloat((1 / dpr).toFixed(2));    
            }
        }
    }

    if (!dpr && !scale) {
        var isAndroid = win.navigator.appVersion.match(/android/gi);
        var isIPhone = win.navigator.appVersion.match(/iphone/gi);
        var devicePixelRatio = win.devicePixelRatio;
        if (isIPhone) {
            // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {                
                dpr = 3;
            } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
                dpr = 2;
            } else {
                dpr = 1;
            }
        } else {
            // 其他设备下，仍旧使用1倍的方案
            dpr = 1;
        }
        scale = 1 / dpr;
    }

    docEl.setAttribute("data-dpr", dpr);
    if (!metaEl) {
        metaEl = doc.createElement("meta");
        metaEl.setAttribute("name", "viewport");
        metaEl.setAttribute("content", "initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no");
        if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(metaEl);
        } else {
            var wrap = doc.createElement("div");
            wrap.appendChild(metaEl);
            doc.write(wrap.innerHTML);
        }
    }

    function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = 540 * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + "px";
        flexible.rem = win.rem = rem;
    }

    win.addEventListener("resize", function() {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }, false);
    win.addEventListener("pageshow", function(e) {
        if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    if (doc.readyState === "complete") {
        doc.body.style.fontSize = 12 * dpr + "px";
    } else {
        doc.addEventListener("DOMContentLoaded", function(e) {
            doc.body.style.fontSize = 12 * dpr + "px";
        }, false);
    }
    

    refreshRem();

    flexible.dpr = win.dpr = dpr;
    flexible.refreshRem = refreshRem;
    flexible.rem2px = function(d) {
      ...   //此处用正则进行rem和px的转换，代码省略
    }
    flexible.px2rem = function(d) {
       ...  //同上
    }

})(window, window["lib"] || (window["lib"] = {}));

（源代码地址：https://github.com/amfe/lib-f...）

在阅读源码前，建议阅读https://github.com/amfe/artic...

前面几段的代码很好理解，如果网页本身有定义的meta标签，则通过正则获取scale和dpr的值，如果网页本身定义了flexible标签，则通过正则表达式获取对应的值。

如果没有设定以上标签，则通过window.devicePixelRatio这个变量来获取dpr。至于dpr是什么呢？上面的文章中有提过，大致来说就是对于视网膜屏，js获取到的宽度值并不等于设备的实际像素值。有的视网膜屏使用2X2四个点来表达一个像素。所以设备的dpr值就是来计算设备屏幕实际像素和css里像素的比例值的。安卓机的dpr被固定为1（安卓机的匹配太困难了，可能要采取其他的方案来解决）。

然后将通过刚才一系列判断和步骤获得的dpr值加到document上，如果网页中没有meta元素，则根据刚刚获得的数值创建并初始化meta元素。

接下来的重头戏来了，这个库的核心函数 refreshRem()。他的功能是：

1.首先获得设备上document元素的宽度值，通过getBoundingClientRect()。

2.这里一开始没看懂，为什么这里非常突兀的出现了一个540的数字？翻看了所有issue后，作者团队给我们解释了（作者原话）：这个540其实是个经验值，或者最大值，这个经验是怎么得出来的呢？
目前主流手机最大的css像素尺寸，是540（比如devicePixelRatio为2，分辨率是1080x1920的手机），所以用了这个经验值。这样可以让在ipad横屏这种情况下浏览无线页面，不至于因为拉伸适配后体验太差。
换句话说，这个540像素值是手机屏幕能到达的最大宽度（在考虑dpr以后），如果有宽度超过540的情况，则说明该网页被显示在 dpr超过1的大屏安卓机、ipad、PC端上。这时候，就使用540这个宽度（代码里是dpr*540，除了iPhone不会有dpr超过1的情况出现，所以基本上就是540）作为默认宽度。然后将屏幕宽度除以10作为rem值（模拟vw/vh实现），应用在document元素上，并且将计算得到的rem值输出到全局变量以供调用。

（图为PC端打开嵌入flexible.js的网页时候的rem和dpr数值）

接下来，通过setTimeOut函数，进行函数节流，监听resize和pageshow事件，执行refreshRem(）函数。
这里有个问题，为什么是监听pageshow事件而不是load事件，这里我查了一下资料，发现对于opera和火狐浏览器，pageshow这个事件会在 后退/前进 这两个动作是也触发，而load事件因为页面已经被加载过，被保存在缓存里，就不会触发了。 所以这里的选择是监听pageshow事件。从细节处见功力啊！

最后给body设置font-size，作者团队也解释了（原话）：
body上设置12 * dpr的font-size值，为了重置页面中的字体默认值，不然没有设置font-size的元素会继承html上的font-size，变得很大。

再阅读了flexible的源码后，我们对使用flexible进行移动设配匹配的理解又更深了一层，在实际生产中，可以根据需求，写出符合自己需要的匹配代码，获得更好的用户体验。