解析淘宝的 flexible JS源码

最新推荐文章于 2024-09-03 13:42:24 发布

LeonardoSya

最新推荐文章于 2024-09-03 13:42:24 发布

阅读量347

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_74861839/article/details/129796591

版权

学习前端的时候阅读了淘宝的 flexible JS源码 flexible设置了body,html的大小 1rem是多少像素以及页面大小尺寸变化时重新计算文字大小
对部分代码进行解读，这对前端初学者理解JS源码有一定的帮助

        (function flexible(window, document) {   // 使用立即执行函数的写法

            // documentElement 获取html根元素
            let docEl = document.documentElement;
            // dpr 物理像素比   pc端物理像素比可能是1 移动端物理像素比是2
            let dpr = window.devicePixelRatio || 1;  // 如果无法获取当前浏览器dpr就当成1来看
            // console.log(devicePixelRatio);  // 1.25

            // adjust body font size 设置body的字体大小
            function setBodyFontSize() {
                if (document.body) {   // 设置body字体大小
                    document.body.style.fontSize = (12 * dpr) + 'px';  // 这样在pc端和移动端字体大小会自适应dpr
                } else {
                    document.addEventListener('DOMContentLoaded', setBodyFontSize);  // 因为html是从上往下读取的，如果js写在body前面 还没读取body，那么就执行else里的等页面主要DOM元素加载完之后再调用setBodyFontSize()
                }
            }
            setBodyFontSize();

            // set 1rem = viewWidth / 10  设置html元素的文字大小
            function setRemUnit() {
                let rem = docEl.clientWidth / 10;   // 把整个屏幕划分成10等分 每一份作为 1rem 的大小  比如在pc端 fontsize: 136.6px , 在移动端 fontsize: 37.5px
                docEl.style.fontSize = rem + 'px';
            }
            setRemUnit();

            // reset rem unit on page resize 当页面尺寸大小发生变化时要重新设置rem的大小
            window.addEventListener('resize', setRemUnit());  // 当尺寸大小变化再次调用上面的 setRemUnit()
            // pageshow事件是页面重新加载后触发的事件
            window.addEventListener('pageshow', function (e) {
                if (e.persisted) {  // persisted事件判断当前页面是否是来自缓存 如果当前页面来自缓存则返回true
                    setRemUnit();  // 如果当前页面是从缓存取过来的 也重新计算一下rem的大小
                }
            })

            // detect 0.5px supports  有些移动端的浏览器不支持0.5px的写法
            if (dpr >= 2) {
                let fakeBody = document.createElement('body');
                let 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));