首页 > 代码库 > flexible.js框架改写

flexible.js框架改写

前一阶段拜读了阿里团队的flexible.js,但是flexible的封装感觉还是不完美,因为flexible还是要依赖less/sass之类的编译执行,所以就存了一些问题,我把这些问题进行整理。

优点:

1.代码量明显减少

2.开发效率变高,css管理式开发,css逻辑清晰

3.less+flexible.js能否适配各种手机型号,实现各个尺寸屏幕的兼容

4.less学习成本低(几乎为零)

缺点:

1.less编译成css执行,团队开发git版本控制器的坑,这个不多说了

2.因为是less编译,所以不好后期维护,虽然节省了开发成本,但是很有可能这些节省的开发成本在后期debug的时候增加成本预算

3.如果用css线上,合并肯定又坑,因为你并不知道less是如何取解析编译成css文件的

4.一般项目线上less和gulp编译执行,但是less编译还是需要时间有可能渲染不出来css(几率比较小)

综合上面优缺点,只要合理的规范的使用less,利是远远的大于弊的!尤其是flexible,节省了适配各个型号手机的时间,大大的增加了开发效率!

今天突发奇想,我们flexible.js其实用到的只是less的对rem的计算,那么我们可不可以自己重构这套框架来让它不依赖less,用css来执行flexible.js呢?

;(function(win, lib) {    var doc = win.document;    var docEl = doc.documentElement;    var metaEl = doc.querySelector(meta[name="viewport"]);    var flexibleEl = doc.querySelector(meta[name="flexible"]);    var dpr = 0;    var scale = 0;    var tid;    var flexible = lib.flexible || (lib.flexible = {});    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 zoom(rem, width){        var rate = rem/12;//0.625        var inRate = 12/rem;//16        var oFlexContainer = document.getElementById(flexContainer);        oFlexContainer.style.webkitTransform = scale(+rate+);        var height = oFlexContainer.offsetHeight;        oFlexContainer.style.width = width*inRate+px;        oFlexContainer.style.marginLeft = -(1-rate)/2*(width*inRate) + px;        oFlexContainer.style.marginTop = -(1-rate)/2*height + px;        console.log(height)        console.log(width*inRate)    }    function refreshRem(){        var width = docEl.getBoundingClientRect().width;        var height = document.getElementById(flexContainer).getBoundingClientRect().height;        if (width / dpr > 540) {            width = 540 * dpr;        }        var rem = width / 750;        console.log(width)        if(rem < 12){            zoom(rem, width, height)        }        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) {        var val = parseFloat(d) * this.rem;        if (typeof d === string && d.match(/rem$/)) {            val += px;        }        return val;    }    flexible.px2rem = function(d) {        var val = parseFloat(d) / this.rem;        if (typeof d === string && d.match(/px$/)) {            val += rem;        }        return val;    } })(window, window[lib] || (window[lib] = {}));

上面是我今天做的一个小demo,如果你想要200px的一个元素,手淘样式是这样实现200rem/75,我的思路是能不能让它把定义的75改写成1,之后我们200rem自适应的还是200px,这样我们就可以脱离less,直接编译css了。

但是我们最大的问题就是一点,chrome浏览器支持的font-size最小为12px,也就是说如果你用10px浏览器会自动给你转化为12px(有点小坑,据说是因为12px以下的字太小了,为了避免bug设置了最小12px。。。),如何才能改写font-size让它可以小于12px呢?

-webkit-text-size-adjust:none;
font-size:10px;

但是我试了一下,新版的chrome取消了这个方法,也就是说,新版的无效,老版的chrome可能有效...excuse? ? ?难道让我们检测告诉你,你的浏览器版本太新,请降级。。。

然后我想起了某个css3属性

transform:scale(0.875);

然后我又脑洞大开,可不可能先给他元素拉到无限大(因为rem=font-size,200rem你自己算吧),然后再用这个transfrom属性按照比例缩小呢?,之后缩小的左边距和上边距拉回!!!

 

    function refreshRem(){        var width = docEl.getBoundingClientRect().width;        var height = document.getElementById(flexContainer).getBoundingClientRect().height;        if (width / dpr > 540) {            width = 540 * dpr;        }        var rem = width / 750;        console.log(width)        if(rem < 12){            zoom(rem, width, height)        }        docEl.style.fontSize = rem + px;        flexible.rem = win.rem = rem;    }

函数运行时候,我们取到了flexContainer的id(一个定义的div作为类似body的容器)的height,之后我们运行zoom函数

  function zoom(rem, width){        var rate = rem/12;//0.625        var inRate = 12/rem;//16        var oFlexContainer = document.getElementById(flexContainer);        oFlexContainer.style.webkitTransform = scale(+rate+);        var height = oFlexContainer.offsetHeight;        oFlexContainer.style.width = width*inRate+px;        oFlexContainer.style.marginLeft = -(1-rate)/2*(width*inRate) + px;        oFlexContainer.style.marginTop = -(1-rate)/2*height + px;        console.log(height)        console.log(width*inRate)    }

我们取到rate(正比)和inRate(反比)来做一个比率的运算,上面代码就是动态的设置flexContainer(自己定义的div容器)的状态,我们的思路是吧所有要写的元素都写进flexContainer,之后我们动态的改变flexContainer就可以实现想要的效果了,我们这里的flexContainer可以理解成body,为什么不用body呢,因为body最好还是不要动了,我们的元素都被无限放大了,body元素改动可能会影响你的整体布局!

之后我们改写了这段代码:

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

我们把上面的代码改成:

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

这样子我们每次刷新都会获取新的值,不用判断了,不然页面会算不出我们想要的flexContainer的height,我们必须得到height才能够获取到我们应该定义的margin-top,公式是这样子的:

-(1-rate)/2*height

注意因为我们是反向拉伸的,所以是负值,这个原理和居中的元素(margin负方法)有点像。

最后来说一下font-size的问题!

因为我们的元素最后被放大了rate倍(rate为0.0几的小数),所以我们最后的font-size是一个比较恶心的数,就拿750举例子,我们大多数用的都是750的美工ui图,750的时候我们的rate为0.0833333,所以我们的1px大小相当于原来的0.0833333,也就是说100px大概8.3333像素大小,实际像素为4.16。

这个也是现存的问题也就是说我们的font-size的定义必须要根据这个比率来算,但是个人认为font-size出现的几率和width,height是没有可比性的,只要我们合理的规划好font-size那么这个问题也是基本上可以忽略的!

flexible.js框架改写