jQuery 源碼分析(十八) ready事件詳解

ready事件是當DOM文檔樹載入完成後執行一個函數(不包含圖片，css等)，因此它的觸發要早於load事件。用法: $(document).ready(fun) ;fun是一個函數，這樣當DOM樹載入完畢後就會執行該匿名函數了 ready有一個簡寫，可以直接傳入$(fun)即可，這是因為在jQue ...

ready事件是當DOM文檔樹載入完成後執行一個函數(不包含圖片，css等)，因此它的觸發要早於load事件。用法:

$(document).ready(fun)　　　　;fun是一個函數，這樣當DOM樹載入完畢後就會執行該匿名函數了

ready有一個簡寫，可以直接傳入$(fun)即可，這是因為在jQuey內部也定義了一個$(document)的jQuery對象，和我們在上面的寫法是一樣的

ready事件和window的onload區別:

ready事件　　;等dom樹載完畢後就可以執行
onload事件　 ;等網頁中所有的資源載入完畢後(包括圖片，flash,音頻，視頻)才能執行

onload事件還可以綁定在某個圖片上面，舉個例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
    <img src="https://www.cnblogs.com/images/logo_small.gif"  alt="">
    <script>
        $(()=>console.log('DOM樹已載入完畢'))                        //ready事件
        $('img').on('load',()=>console.log('圖片已載入完畢'))        //圖片的載入事件
        $(window).on('load',()=>console.log('資源已載入完畢'))       //網頁所有資源都載入完畢後的事件        
    </script>
</body>
</html>

這裡我們用了箭頭函數來寫，代碼很簡單了，我們在綁定了一個ready事件，一個圖片上的onload事件和window上的onload事件，載入後輸出如下:

可以看到首先是ready事件的觸發，然後是圖片的onload事件，最後是window的onload事件的觸發，此時所有資源都已經載入完了

源碼分析

jquery的ready事件就是在document上綁定了一個DOMContentLoaded事件對象，對他進行了一下封裝，DOMContentLoaded事件的原理可以看看看這篇文章，介紹得挺詳細的:https://www.cnblogs.com/caizhenbo/p/6679478.html

jQuery的ready事件是基於函數列表實現的，函數列表可以看這個連接:https://www.cnblogs.com/greatdesert/p/11433365.html

當我們調用$(fun)去執行一個ready事件的時候首先會執行入口模塊里的邏輯，與ready相關的如下:

init: function( selector, context, rootjQuery ) {
    var match, elem, ret, doc;

    // Handle $(""), $(null), or $(undefined)
    if ( !selector ) {
        return this;
    }

    // Handle $(DOMElement)
    if ( selector.nodeType ) {
        this.context = this[0] = selector;
        this.length = 1;
        return this;
    }

    // The body element only exists once, optimize finding it
    if ( selector === "body" && !context && document.body ) {
        this.context = document;
        this[0] = document.body;
        this.selector = selector;
        this.length = 1;
        return this;
    }

    // Handle HTML strings
    if ( typeof selector === "string" ) {
        /*略*/
    } else if ( jQuery.isFunction( selector ) ) {            //如果參數selector是函數，則認為是綁定ready事件
        return rootjQuery.ready( selector );                    //則執行rootjQuery.ready()方法，並把selector作為參數傳入
    }

    /*略*/
},

rootjQuery是jQuery內部定義的一個局部變數，是一個jQuery實例，如下:

rootjQuery = jQuery(document);             　　　　　　　　　　//第917行，保存了document對象引用的jQuery實例

在入口模塊引用rootjQuery.ready()也就是執行了rootjQuery實例對象上的ready方法(該方法是定義在原型上的),如下:

jQuery.fn = jQuery.prototype = {
    ready: function( fn ) {
        // Attach the listeners
        jQuery.bindReady();                 //先執行jQuery.bindReady()綁定ready事件(實際上綁定的是DOMContentLoaded或onreadystatechange事件)

        // Add the callback
        readyList.add( fn );                //為函數列表readyList增加一個函數

        return this;
    }
}

jQuery.bindReady()是一個靜態方法，用於綁定事件的，內部會初始化readyList為一個jQuery.Callbacks( "once memory" )函數列表對象

然後執行readyList.add( fn )將fn函數保存到函數列表readyList裡面。

jQuery.bindReady()的實現如下:

jQuery.extend({
    bindReady: function() {                            //初始化ready事件監聽函數列表readyList，併為document對象綁定ready事件主監聽函數DOMContentLoaded
        if ( readyList ) {
            return;
        }

        readyList = jQuery.Callbacks( "once memory" );                        //調用jQuery.Callbacks(flags)ready事件監聽函數列表readylist，同時傳入once和memory標記。

        // Catch cases where $(document).ready() is called after the
        // browser event has already occurred.
        if ( document.readyState === "complete" ) {                            //如果文檔已經就緒，則調用jQuery.ready(wait)執行ready事件監聽函數列表readyList
            // Handle it asynchronously to allow scripts the opportunity to delay ready
            return setTimeout( jQuery.ready, 1 );                                //通過setTimeout()非同步執行方法jQuery.ready(wait)，以允許其他腳本延遲ready事件的觸發。
        }

        // Mozilla, Opera and webkit nightlies currently support this event
        if ( document.addEventListener ) {                                     //在IE9+及以上瀏覽器綁定DOMContentLoaded事件
            // Use the handy event callback
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );         //把監聽函數DOMContentLoaded綁定到document對象的DOMContentLoaded事件上

            // A fallback to window.onload, that will always work
            window.addEventListener( "load", jQuery.ready, false );

        // If IE event model is used
        } else if ( document.attachEvent ) {
            // ensure firing before onload,
            // maybe late but safe also for iframes
            document.attachEvent( "onreadystatechange", DOMContentLoaded );

            // A fallback to window.onload, that will always work
            window.attachEvent( "onload", jQuery.ready );

            // If IE and not a frame
            // continually check to see if the document is ready
            var toplevel = false;

            try {
                toplevel = window.frameElement == null;
            } catch(e) {}

            if ( document.documentElement.doScroll && toplevel ) {
                doScrollCheck();
            }
        }
    },
    /*略*/
})

這裡我們調用document.addEventListener在document上綁定了一個DOMContentLoaded事件，這樣當DOM樹載入完後就會執行DOMContentLoaded函數了，DOMContentLoaded函數的定義如下:

if ( document.addEventListener ) {         //如果是IE9+和其他瀏覽器
    DOMContentLoaded = function() {
        document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );    //先移除document的DOMContentLoaded事件
        jQuery.ready();                                                                    //再調用jQuery.ready()執行ready事件監聽函數
    };

} else if ( document.attachEvent ) {
    DOMContentLoaded = function() {
        // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
        if ( document.readyState === "complete" ) {
            document.detachEvent( "onreadystatechange", DOMContentLoaded );
            jQuery.ready();
        }
    };
}

函數內首先會移除DOMContentLoaded事件，然後調用jQuery.ready()事件，這是DOM樹觸發後的事件了(我們在jQuery.fn.ready()內執行了readyList.add( fn )增加的函數都會依次觸發)，如下:

jQuery.extend({
    isReady: false,
    ready: function( wait ) {                        //實際執行的函數  觸發ready事件監聽函數列表readyList和數據緩存對象中的ready事件監聽函數。
        // Either a released hold or an DOMready/load event and not yet ready
        if ( (wait === true && !--jQuery.readyWait) || (wait !== true && !jQuery.isReady) ) {    //如果wait是true且jQuery.readyWait等於0 或者 wait不是true且jQuery.isReady是false 則執行 初始化jQuery.isReady為false的
            // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
            if ( !document.body ) {
                return setTimeout( jQuery.ready, 1 );
            }

            // Remember that the DOM is ready
            jQuery.isReady = true;                                        //設置jQuery.inReady為true,表示ready事件已就緒。

            // If a normal DOM Ready event fired, decrement, and wait if need be
            if ( wait !== true && --jQuery.readyWait > 0 ) {
                return;
            }

            // If there are functions bound, to execute
            readyList.fireWith( document, [ jQuery ] );                 //執行ready事件監聽函數readyList,上下文是document(即關鍵詞this)，[jQuery]是ready事件監聽函數的參數。

            // Trigger any bound ready events
            if ( jQuery.fn.trigger ) {
                jQuery( document ).trigger( "ready" ).off( "ready" );
            }
        }
    },
    /*略*/
})

writer by:大沙漠 QQ:22969969

最後調用readyList.fireWith()方法去觸發回掉函數列表裡的每個函數。