jQuery的ready方法實現原理分析

標籤：http   io   ar   os   使用   sp   java   on   bs   

jQuery中的ready方法實現了當頁面載入完成後才執行的效果，但他並不是window.onload或者doucment.onload的封裝，而是使用 標準W3C瀏覽器DOM隱藏api和IE瀏覽器缺陷來完成的，首先，我們來看jQuery的代碼

DOMContentLoaded = function() {         //取消事件監聽，執行ready方法if ( document.addEventListener ){     document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );jQuery.ready();} else if ( document.readyState === "complete" ) {document.detachEvent( "onreadystatechange", DOMContentLoaded );jQuery.ready();}};

jQuery.ready.promise = function( obj ) {    if ( !readyList ) {        readyList = jQuery.Deferred();            //表示頁面已經載入完成，直接調用 ready方法        if ( document.readyState === "complete" ) {             //將 jQuery.ready壓入非同步訊息佇列，設定延遲時間1毫秒（注意，有些瀏覽器延遲不能小於4毫秒）            setTimeout( jQuery.ready);         }         else if ( document.addEventListener ) //        {             //監聽DOM載入完成            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );             //這裡是為了確保所有ready執行結束，如果DOMContentLoaded方法執行了，將有一個狀態值 isReady被設定為true,因此，             //ready方法一旦執行，那麼將只執行一次，window.addEventListener中的ready 將被 return 中斷            window.addEventListener( "load", jQuery.ready, false );          } else {            //低版本的IE瀏覽器            document.attachEvent( "onreadystatechange", DOMContentLoaded );            window.attachEvent( "onload", jQuery.ready );            var top = false;            try {                top = window.frameElement == null && document.documentElement;            } catch(e) {}            if ( top && top.doScroll )  //剔除iframe的成分            {                (function doScrollCheck() {                    if ( !jQuery.isReady ) {                        try {                            //根據bug來相容低版本的IE http://javascript.nwbox.com/IEContentLoaded/                            top.doScroll("left");                        } catch(e) {                            //由於低版本的IE 瀏覽器，onreadystatechange事件不可靠，因此需要根據各個bug來判斷頁面是否已載入完成                            return setTimeout( doScrollCheck, 50 );                         }                        jQuery.ready();                    }                })();            }        }    }    return readyList.promise( obj );};

ready: function( wait ) {if ( wait === true ? --jQuery.readyWait : jQuery.isReady ) { //判斷頁面是否已完成載入並且是否已經執行ready方法return;}if ( !document.body ) {return setTimeout( jQuery.ready );}jQuery.isReady = true; //指示ready方法已被執行if ( wait !== true && --jQuery.readyWait > 0 ) {return;}readyList.resolveWith( document, [ jQuery ] );if ( jQuery.fn.trigger ) {jQuery( document ).trigger("ready").off("ready"); }},

jQuery的ready方法實現原理分析