jQuery-1.9.1源碼分析系列（六）延時(shí)對(duì)象應(yīng)用——jQuery.ready

2024-04-27 15:02:45

字體：大中小

供稿：網(wǎng)友

　　還記不記得jQuery初始化函數(shù)jQuery.fn.init中有這樣是一個(gè)分支

//document ready簡(jiǎn)便寫法$(function(){&hellip;})} else if ( jQuery.isFunction( selector ) ) {    return rootjQuery.ready( selector );}

　　所以$(fn)===$(document).ready(fn)。

　　來(lái)看一下jQuery.fn.ready的源碼

ready: function( fn ) {    // Add the callback    jQuery.ready.PRomise().done( fn );    return this;}

　　很明顯在jQuery.ready.promise函數(shù)中設(shè)置了延時(shí)，當(dāng)延時(shí)對(duì)象解決的時(shí)候執(zhí)行fn函數(shù)。

　　主要的處理流程：

　　創(chuàng)建一個(gè)延時(shí)對(duì)象，并將文檔準(zhǔn)備好后的處理事件添加到該延時(shí)對(duì)象成功事件列表上。

jQuery.ready.promise = function( obj ) {　　if ( !readyList ) {　　　　readyList = jQuery.Deferred();

　　　　...

　　}    return readyList.promise( obj );}

　　添加文檔準(zhǔn)備狀態(tài)的監(jiān)聽函數(shù)(jQuery.ready.promise函數(shù)片段)

    //標(biāo)準(zhǔn)瀏覽器支持DOMContentLoaded事件    } else if ( document.addEventListener ) {            //綁定DOMContentLoaded事件和響應(yīng)函數(shù)，響應(yīng)函數(shù)會(huì)解決延時(shí)            document.addEventListener( "DOMContentLoaded", completed, false );            //回退到window.onload事件綁定，所有的瀏覽器都支持            window.addEventListener( "load", completed, false );    //如果是IE事件模型    } else {            //確保在onload之前執(zhí)行延時(shí)，可能時(shí)間比較遲，但是對(duì)于iframes來(lái)說(shuō)比較安全            document.attachEvent( "onreadystatechange", completed );            //回退到window.onload事件綁定，所有的瀏覽器都支持            window.attachEvent( "onload", completed );            //如果IE并且不是一個(gè)frame            //不斷地檢查，看是否該文件已準(zhǔn)備就緒            var top = false;            try {                top = window.frameElement == null && document.documentElement;            } catch(e) {}            if ( top && top.doScroll ) {                (function doScrollCheck() {                    if ( !jQuery.isReady ) {                        try {                            // Use the trick by Diego Perini                            // http://javascript.nwbox.com/IEContentLoaded/                            top.doScroll("left");                        } catch(e) {                            return setTimeout( doScrollCheck, 50 );                        }                        //移除之前綁定的事件                        detach();                        //執(zhí)行延遲                        jQuery.ready();                    }                })();            }        }

　　一旦監(jiān)聽到文檔準(zhǔn)備完成，則調(diào)用jQuery.ready執(zhí)行延時(shí)對(duì)象的成功回調(diào)列表：即所有通過jQuery.ready(fn)【或jQuery(fn)】方式添加的函數(shù)fn。

//ready事件處理函數(shù)completed = function( event ) {    // readyState === "complete"在老版本IE上適用    if ( document.addEventListener || event.type === "load" || document.readyState === "complete" ) {        detach();        jQuery.ready();    }},//清除ready事件綁定detach = function() {    if ( document.addEventListener ) {        document.removeEventListener( "DOMContentLoaded", completed, false );        window.removeEventListener( "load", completed, false );    } else {        document.detachEvent( "onreadystatechange", completed );        window.detachEvent( "onload", completed );    }};

//處理當(dāng)DOM準(zhǔn)備完成jQuery.ready: function( wait ) { 　　 　　    ... 　　　　 　　    //設(shè)置DOM已經(jīng)準(zhǔn)備好的標(biāo)志 　　 　　    jQuery.isReady = true;  　　    ... 　　    //執(zhí)行綁定的延時(shí)事件 　　    readyList.resolveWith( document, [ jQuery ] ); 　　    //觸發(fā)任何綁定的就緒事件 　　    if ( jQuery.fn.trigger ) { 　　　　        jQuery( document ).trigger("ready").off("ready"); 　　    }  }

　　整個(gè)過程就是如此。其中有一些小的知識(shí)點(diǎn)整理一下。

a. 文檔加載狀態(tài)document.readyState

　　document.readyState用來(lái)判斷文檔加載狀態(tài)，是一個(gè)只讀屬性，可能的值有：

　　0-uninitialized：xml 對(duì)象被產(chǎn)生，但沒有任何文件被加載。
　　1-loading：加載程序進(jìn)行中，但文件尚未開始解析。
　　2-loaded：部分的文件已經(jīng)加載且進(jìn)行解析，但對(duì)象模型尚未生效。
　　3-interactive：僅對(duì)已加載的部分文件有效，在此情況下，對(duì)象模型是有效但只讀的。
　　4-complete：文件已完全加載，代表加載成功。

　　實(shí)例:

document.onreadystatechange = stateChange;//當(dāng)頁(yè)面加載狀態(tài)改變的時(shí)候執(zhí)行這個(gè)方法.function stateChange() { 　　
　　if(document.readyState == "complete"){ //當(dāng)頁(yè)面加載狀態(tài)為完全結(jié)束時(shí)進(jìn)入 　　　　
　　　　alert("文檔加載成功") 　　
　　} 
}

　　但是，老版本的Firefox并不支持document.readyState【最新的Firefox已經(jīng)支持了】。所以想要兼容所有瀏覽器監(jiān)聽文檔準(zhǔn)備完成分兩種情況來(lái)處理：

　　- 標(biāo)準(zhǔn)瀏覽器使用addEventListener添加DOMContentLoaded和load監(jiān)聽，任何一個(gè)事件被觸發(fā)即可

　　- 老版本IE瀏覽器使用attachEvent添加onreadystatechange和onload來(lái)監(jiān)聽，任何一個(gè)被觸發(fā)，并且onreadystatechange時(shí)document.readyState === "complete"即可。

　　jQuery的處理也就是如此了

jQuery.ready.promise = function(){　　...
　　//標(biāo)準(zhǔn)瀏覽器支持DOMContentLoaded事件　　else if ( document.addEventListener ) {            //綁定DOMContentLoaded事件和響應(yīng)函數(shù)，響應(yīng)函數(shù)會(huì)解決延時(shí)            document.addEventListener( "DOMContentLoaded", completed, false );            //回退到window.onload事件綁定，所有的瀏覽器都支持            window.addEventListener( "load", completed, false );    //如果是IE事件模型    } else {            //確保在onload之前執(zhí)行延時(shí)，可能時(shí)間比較遲，但是對(duì)于iframes來(lái)說(shuō)比較安全            document.attachEvent( "onreadystatechange", completed );            //回退到window.onload事件綁定，所有的瀏覽器都支持            window.attachEvent( "onload", completed );
　　　　　　　...　　}}//ready事件處理函數(shù)completed = function( event ) {    // readyState === "complete"在老版本IE上適用    if ( document.addEventListener || event.type === "load" || document.readyState === "complete" ) {        detach();        jQuery.ready();    }}

b.doScroll檢測(cè)文檔加載完成

　　這是Diego Perini 發(fā)現(xiàn)的一種檢測(cè)IE是否加載完成的方式。詳細(xì)鏈接

　　原理是當(dāng)頁(yè)面 DOM 未加載完成時(shí)調(diào)用 doScroll 方法時(shí)會(huì)產(chǎn)生異常。那么不斷的取檢測(cè)異常是否發(fā)生就可以知道文檔有沒有加載完成。當(dāng)沒有發(fā)生異常，表明文檔加載完成了。

                (function doScrollCheck() {                    if ( !jQuery.isReady ) {                        try {                            // Use the trick by Diego Perini                            // http://Javascript.nwbox.com/IEContentLoaded/                            top.doScroll("left");                        } catch(e) {                            return setTimeout( doScrollCheck, 50 );                        }                        //移除之前綁定的事件                        detach();                        //執(zhí)行延遲                        jQuery.ready();                    }                })();