对于淘宝flexibleJS源码分析的笔记

对于淘宝flexibleJS源码分析的笔记

下面三种情况刷新页面的时候会触发load事件

• ①a标签的超链接
• ②f5或者刷新按钮
• ③前进或者后退按钮
• 在火狐中有一个“往返缓存”，这个缓存不仅保存着页面数据，还保存着DOM和js的状态，实际上将整个页面都保存在了内存里。此时的后退按钮不能刷新页面，但是可以使用pageshow事件来触发，这个事件在页面显示的时候触发，无论页面是否来自缓存，。
• 在重新加载页面中，pageshow会在load事件触发后触发，根据事件对象中的persister来判断是否是缓存中的页面触发的pageshow事件。注意这个事件给window触发

<script>
    (function flexible(window,document){
        //获取html的根元素
        var docE1 = document.documentElement
        //dpr物理像素比,在pc端是1，就是先看一下当前浏览器的像素比，如果没有就后面的结果，当1来看
        var dpr = window.devicePixelRatio || 1

        //adjust body font size 设置body的字体大小
        function setBodyFontSize() {
            //如果页面中有body 这个元素 就设置body的字体
            if(documnet.body) {
                document.body.style.fontSize = (12*dpr) + 'px'
            } else {
                //如果页面中没有body这个元素 等到页面中的主要元素加载完毕后执行此函数 设置字体大小
                document.addEventListener('DOMContentLoader',setBodyFontSize)
            }
        }

        setBodyFontSize();

        //set 1rm = viewWidth /10  设置html中元素和文字的大小
        function setRemUnit() {
            //是我们前面已经设定好了的html的宽度/10，相当于把元素划分成为十等分
            var rem = docEl.clientWidth/10  
            docEl.style.fontSize = rem + 'px'
        }
        
        setRemUnit()
        //reset rem unit on page resize 当我们页面尺寸大小发生变化的时候，重新设置了以下rem的大小
        window.addEventListener('resize',setRemUnit)
        //pageshow是我们重新加载页面的时候会触发的事件，比onload更兼容
        window.addEventListener('pageshow',function(e){
            //e.persisted返回的是true，就是说如果这个页面是从缓存取过来的页面，也要重新己算rem的大小
            if (e.persisted){
                setRemUnit()
            }
        })
        



    }(window,document)) //把这两个参数传入，我们的立即执行函数就可以使用这两个函数了