jQuery源码学习9——DOMReady加载

先将和ready相关的代码都归纳出来

    function jQuery(a,c) {
        if ( a && a.constructor == Function && jQuery.fn.ready ){
            return jQuery(document).ready(a);
        }
    }
    jQuery.fn.extend({
        ready: function(f) {
            if ( jQuery.isReady )
                f.apply( document );
            else {
                jQuery.readyList.push( f );
            }        
            return this;
        }
    });
    jQuery.extend({
        isReady: false,
        readyList: [],
        ready: function() {
            if ( !jQuery.isReady ) {
                jQuery.isReady = true;
                if ( jQuery.readyList ) {
                    for ( var i = 0; i < jQuery.readyList.length; i++ )
                        jQuery.readyList[i].apply( document );
                    jQuery.readyList = null;
                }
            }
        }
    });
    new function(){
        if ( jQuery.browser.mozilla || jQuery.browser.opera ) {
            document.addEventListener( "DOMContentLoaded", jQuery.ready, false );
        } else if ( jQuery.browser.msie ) {
            document.write("<scr" + "ipt id=__ie_init defer=true " + 
                "src=//:></script>");
            var script = document.getElementById("__ie_init");
            script.onreadystatechange = function() {
                if ( this.readyState == "complete" )
                    jQuery.ready();
            };
            script = null;
        } else if ( jQuery.browser.safari ) {
            jQuery.safariTimer = setInterval(function(){
                if ( document.readyState == "loaded" || 
                    document.readyState == "complete" ) {
                    clearInterval( jQuery.safariTimer );
                    jQuery.safariTimer = null;
                    jQuery.ready();
                }
            }, 10);
        } 
        jQuery.event.add( window, "load", jQuery.ready );    
    }

jQuery里面的初始化已经在document或者script上绑定了一些事件

FF和opera下，document的DOMContentLoaded完成之后触发jQuery.ready事件

IE下，script的onreadystatechange事件中script.readyState是complete的时候触发jQuery.ready事件

webkit内核下貌似是手动实现了一个onreadystatechange事件，开了一个定时器，每隔10ms监听一下document上的readyState是否为complete

如果是complete的话，触发jQuery.ready事件，顺便把这个定时器干掉

最后做了一个万全的方案，window对象的onload方法触发时，也就是页面中所有东西都加载完的时候触发jQuery.ready事件

通过上述分析可以发现不管在哪个浏览器下都有两次机会触发jQuery.ready事件

第一次就是在DOM结构加载完毕(DOMContentLoaded完毕或者readyState为complete)

第二次就是在页面所有资源加载完毕(window.onload)

这两次触发jQuery.ready是相互竞争的

如果不做任何处理，一定会重复两次去执行jQuery.ready

所以jQuery初始化的时候加了一个isReady的一个静态方法

初始值为false

在触发jQuery.ready的时候，先if判断了一下jQuery.ready的值

如果jQuery.ready的值是false的话，证明之前没有触发过jQuery.ready

jQuery.ready里面马上把jQuery.isReady变成true，代表触发过了

那第二次再触发jQuery.ready的时候里面再判断jQuery.isReady

变成了true的话就什么都不做了

我们关键看jQuery.ready是false，即之前没有触发过的情况

在这种情况下进一步判断jQuery.readyList

jQuery.readyList也是在jQuery初始化的时候定义的

初始值是一个空数组

我们在以$(function(){})或者$(document).ready(function(){})调用的时候都会在某个时机把里面的函数添加到jQuery.readyList中

数组不管空还是不空都是真，所以这个判断始终为真

进入if判断之后就循环jQuery.readyList里面的所有函数

依次执行每个函数

或许是考虑到jQuery.readyList在执行完以后就没什么用了，所以就把readyList直接赋值为null了

我们通过$(function(){})或者$(document).ready(function(){})的调用方式希望页面加载完毕触发里面的函数时

会调用jQuery.fn.ready这个方法

这个jQuery.fn.ready里面的实现虽然只有短短几行代码，但很值得分析一下

里面通过判断jQuery.isReady的值来执行不同的操作

前面分析到jQuery.isReady初始化为false

而且是在DOMContentLoaded/readyState=="complete"/onload任何一种完事了之后变成true的

在jQuery.fn.ready里面

jQuery.isReady是false的时候我们是把事件function添加到readyList队列里面

jQuery.isReady是true的时候我们直接执行了function

这里就不得不佩服jQuery作者英明的思路了

isReady是false的时候放在队列里面的方法在DOMContentLoaded/readyState=="complete"/onload完毕之后在jQuery.ready()中去挨个执行

isReady是true的时候，页面已经加载完毕，所以就直接执行function了

还是用例子说更直观一些，例如下面的代码

    $(aaa);
    $(bbb);
    $(ccc);
    $(ddd);
    function aaa(){
        alert(1);
    }
    function bbb(){
        alert(2);
    }
    function ccc(){
        alert(3);
    }
    function ddd(){
        $(eee);
    }
    function eee(){
        alert(4);
    }

最开始我们引入的jQuery执行的时候其实已经绑定了DOMContentLoaded/readyState=="complete"/onload这一系列事件

那从引入的jQuery文件执行完毕到这些事件触发并执行jQuery.ready之前js会接着往下执行$(aaa) $(bbb) $(ccc)...

假如执行到$(bbb)的时候

DOMContentLoaded/readyState=="complete"/onload里面中的一个触发了

那在jQuery.ready执行的时候jQuery.readyList里面就会有aaa bbb两个函数

为什么是这两个呢？

因为在DOMContentLoaded/readyState=="complete"/onload触发之前，每执行一次$(xxx)

判断之后发现jQuery.isReady是false，就会将aaa bbb这两个函数push到readyList中了

此后jQuery.isReady的值就是true了

再执行$(ccc) $(ddd)的话，判断之后发现jQuery.isReady是true

ccc和ddd就会直接执行

执行ddd的时候发现ddd里面又执行了$(eee)

同样jQuery.isReady仍然是true，所以还是会直接执行eee