jQuery原生js实现---ready方法

对于很多js库，框架来说都带有js加载延迟。jQuery的ready方法就是等待DOM元素加载完便立即执行，原生js接口onload是等待所有html加载完再加载js文件。

ready方法实现原理是利用DOMContentLoaded和 document.documentElement.doScroll("left");实现跨浏览器加载。两个方式都能够监测dom元素是否加载完毕，从而回掉函数执行加载js文件内容。

DOMContentLoaded该方法IE不支持，支持该方法的浏览器在某些表现上也有些许差异，所以我们要对浏览器型号做区分。

    <div id="id1">123</div>
    <div class="cla1">1</div>
    <div class="cla1">2</div>
    <div class="cla1">3</div>
    <div class="cla1">4</div>
    <div class="cla1">5</div>
    <div class="cla1">6</div>
    <div class="cla1">7</div>
    <div class="cla1">8</div>

//jQuery原生js实现

ready = (fn) =>{
    if(document.addEventListener){
        return document.addEventListener( "DOMContentLoaded",fn, false ); 
    }
}

ready(function(){
   document.querySelector('#id1').innerHTML='456';
})

以上代码初步实现ready函数绑定回掉函数fn事件DOMContentLoaded，但我们还需要实现IE的加载判断。

function ready(fn){
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    
    if(document.addEventListener){
        return document.addEventListener( "DOMContentLoaded",fn, false ); 
    }
    if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1  && window == top ){ (function(){ 

        try { 
                // 这个地方标记一下,在后面解析(1) 
                document.documentElement.doScroll("left"); 
            } catch(error) { 
         这个地方标记一下,在后面解析(2) 
                setTimeout( arguments.callee, 0 ); 
                return; 
            } 
        fn();
        }
    )()}
}

ready(function(){
   alert(document.getElementById('id1').innerHTML)
})

当dom未完成解析时,调用document的document.documentElement.doScroll(”left”)会出错这个小技巧便可得知dom有没有ready了。上面代码基本上已经实现ready函数加载，但是我们还得加上默认onload事件。

function ready(fn){
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    var isReady = false;
    var otherOload = '';
    if(document.addEventListener){
        isReady = true;
        return document.addEventListener( "DOMContentLoaded",fn, false ); 
    }
    if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1  && window == top ){ (function(){ 
        try { 
                // 这个地方标记一下,在后面解析(1) 
                document.documentElement.doScroll("left"); 
            } catch(error) { 
         这个地方标记一下,在后面解析(2) 
                setTimeout( arguments.callee, 0 ); 
                return; 
            } 
        fn();
        isReady = true;
        }
    )()}
    if(!isReady){
        if(document.addEventListener){
            otherOload = window.addEventListener( "load",fn, false )
        }else{
            otherOload = window.attachEvent( "onload",fn, false );
        }
        return otherOload;
    }

}

ready(function(){
   alert(document.getElementById('id1').innerHTML)
})

到这里便可以使用ready函数进行js加载了