jquery ready方法實現原理內部原理

時間 2019-11-10

原文原文鏈接

今天閒來無事研究研究jquery.ready()的內部實現，看JQ的源碼一頭霧水，因爲本身很菜了，因而翻了翻牛人的播客，講述詳細，收穫頗多。javascript

先普及一下jquery.ready()和window.onload，window.onload事件是在頁面全部的資源都加載完畢後觸發的. 若是頁面上有大圖片等資源響應緩慢, 會致使window.onload事件遲遲沒法觸發.因此出現了DOM Ready事件. 此事件在DOM文檔結構準備完畢後觸發, 即在資源加載前觸發. html

個人ready方法寫了2版，借鑑了很多前輩的代碼，先上代碼。java

代碼1.0問世，代碼以下：jquery

var $ = ready = window.ready = function(fn){  
     if(document.addEventListener){//兼容非IE  
         document.addEventListener("DOMContentLoaded",function(){  
             //註銷事件，避免反覆觸發  
             document.removeEventListener("DOMContentLoaded",arguments.callee,false);  
             fn();//調用參數函數  
         },false);  
     }else if(document.attachEvent){//兼容IE  
         document.onreadystatechange = function() {
             if (document.readyState == 'complete') {
                 document.onreadystatechange = null;
                 document.attachEvent("onreadystatechange",function(){
                     document.detachEvent("onreadystatechange",arguments.callee);
                     fn();//調用參數函數  
                 });  
             }
         };
     }  
 }
 
 ready(function(){
     alert(1);
 });

1.0是有問題的，對於不蛋疼的瀏覽器天然沒有事，但是遇到IE，你們要淡定。IE9無缺沒有問題，但是IE6/7/8，就噁心了。瀏覽器

大家測試的時候最好頁面裏裝一張巨大的圖片，每次都要強刷，你會發現IE6/7/8上咱們寫的ready和onload沒有設那麼兩樣！可能還會比onload還要慢！fuck！其實這個是onreadystatechange的問題，你要想讓他管用你頁面就別方圖了,你們是否是臉上一條黑線飄過，哎！我昨天買了塊表阿！函數

因而翻了篇大大的播客解決問題辦法來了。測試

代碼2.0問世，代碼以下：spa

var $ = ready = window.ready = function(fn){  
    if(document.addEventListener){//兼容非IE  
        document.addEventListener("DOMContentLoaded",function(){  
            //註銷事件，避免反覆觸發  
            document.removeEventListener("DOMContentLoaded",arguments.callee,false);  
            fn();//調用參數函數  
        },false);  
    }else if(document.attachEvent){//兼容IE  
       IEContentLoaded (window, fn);
    }  

    function IEContentLoaded (w, fn) {
        var d = w.document, done = false,
        // only fire once
        init = function () {
            if (!done) {
                done = true;
                fn();
            }
        };
        // polling for no errors
        (function () {
            try {
                // throws errors until after ondocumentready
                d.documentElement.doScroll('left');
            } catch (e) {
                setTimeout(arguments.callee, 50);
                return;
            }
            // no errors, fire

            init();
        })();
        // trying to always fire before onload
        d.onreadystatechange = function() {
            if (d.readyState == 'complete') {
                d.onreadystatechange = null;
                init();
            }
        };
    }
}
ready(function(){alert(1)})