jQuery 如何实现 domReady 和 onload 判断

    对于 jQuery 使用中 $( function(){} ) 的形式我们都不陌生，将事件函数绑定在 dom 加载完毕的时刻，相对于 window.onload 来讲可以避免一些图片，动态脚本，以及一些外部资源等加载对于当前代码执行带来的较大的延时影响，因为 window.onload 是需要等当前页面需要加载的资源全部加载结束后才触发执行，包括 onload 触发之前执行的动态加载。

    对于标准浏览器，具有 DOMContentLoaded 事件来作为 dom 加载完毕后触发的事件，当然准确点说的话是 dom 和 非动态加载的JS 加载完毕时刻触发（关于触发时机可以看这里 ）。
    
    当然低版本的IE（IE6 ~ IE8）不支持 DOMContentLoaded 事件，那么也需要使用一些其他的方法来进行模拟 DOMContentLoaded 时刻触发。当前主流的低版本IE模拟方法就是使用 doScroll 进行循环判断，对于 JScript ，若在 dom 未加载完毕时刻调用 doScroll 则会报错，借此使用 try catch 进行轮询判定。

    那么，要了解 jQuery 对 domReady 和 load 的区分，其实就是说 jQuery 对于兼用的 domReady 是如何实现的而已，因为 onload 是各个浏览器已经实现的事件，而 DOMContentLoaded 未被低版本IE实现。然后本次使用的 jQuery 版本为 1.11，毕竟还要包括以下低版本IE，所以不使用 2.*的版本，但其实质是一样的，只不过 2.*版本中就舍弃使用 doScroll 进行循环判定放弃低版本IE而已。那么，要了解本质，最好的办法还是看 jQuery 源码。

// DOM ready 的 一个 jQuery deferred
// 也作为 绑定初始化的判定标签
var readyList;

// 调用绑定才进行 绑定初始化
jQuery.fn.ready = function( fn ) {
    // 未初始化过的才进行初始化绑定
    jQuery.ready.promise().done( fn );
    return this;
};

jQuery.extend({
    // DOM ready 是否触发过标签
    isReady: false,
    readyWait: 1,

    holdReady: function( hold ) {
        if ( hold ) {
            jQuery.readyWait++;
        } else {
            jQuery.ready( true );
        }
    },

    // DOM ready 时刻的事件句柄
    ready: function( wait ) {

        if ( wait === true ? --jQuery.readyWait : jQuery.isReady ) {
            return;
        }

        // IE的小BUG 确保 body 已经存在
        if ( !document.body ) {
            return setTimeout( jQuery.ready );
        }

        // 切换标签状态
        jQuery.isReady = true;

        // 是否需要等待的标签
        if ( wait !== true && --jQuery.readyWait > 0 ) {
            return;
        }

        // 执行以 jquery 形式的 ready 绑定
        readyList.resolveWith( document, [ jQuery ] );

        // 在次触发其他形式的绑定，并且及时注销
        if ( jQuery.fn.triggerHandler ) {
            jQuery( document ).triggerHandler( "ready" );
            jQuery( document ).off( "ready" );
        }
    }
});

 
    扩展的 isReady 是用来控制 ready 的执行次数的，readyWait 和 holdReady 在此不在此文解释范围，其中的 ready 方法 就是核心了，为 jQuery 判定 domReady 时所触发的方法，又结合了 defferred 的 resolveWith 逐一执行存储在 cache 中事件句柄数组中的事件句柄。那么接下来就是 domReady 的重头戏，判定 domReady 时刻。

// 移除所有有关事件句柄 compeleted 的绑定事件
function detach() {
    if ( document.addEventListener ) {
        document.removeEventListener( "DOMContentLoaded", completed, false );
        window.removeEventListener( "load", completed, false );
    } else {
        document.detachEvent( "onreadystatechange", completed );
        window.detachEvent( "onload", completed );
    }
}

// 对于已经过了 domReady 时间点
function completed() {
    // 标准浏览器 或者 为 IE下的load事件 或者 ready 状态为 complete（IE）
    if ( document.addEventListener || event.type === "load" || document.readyState === "complete" ) {
        detach();
        jQuery.ready();
    }
}

jQuery.ready.promise = function( obj ) {
    if ( !readyList ) {
        // 初始化 readyList
        readyList = jQuery.Deferred();

        // 当 $(document).ready() 早在 ready 事件过后被调用的时候，直接触发。
        if ( document.readyState === "complete" ) {
            // 异步方式执行 类似的模拟事件触发形式
            setTimeout( jQuery.ready );

            // DOMContentLoaded 事件绑定
        } else if ( document.addEventListener ) {
            document.addEventListener( "DOMContentLoaded", completed, false );
            window.addEventListener( "load", completed, false );

        // 这边则是低版本IE形式
        } else {
            document.attachEvent( "onreadystatechange", completed );
            window.attachEvent( "onload", completed );

            // IE的 doScroll 方式检测
            var top = false;

            try {
                top = window.frameElement == null && document.documentElement;
            } catch(e) {}

            if ( top && top.doScroll ) {
                (function doScrollCheck() {
                    if ( !jQuery.isReady ) {
                        try {
                            top.doScroll("left");
                        } catch(e) {
                            // 当try中有错误 直接下次延迟循环检测
                            return setTimeout( doScrollCheck, 50 );
                        }

                        detach();
                        jQuery.ready();
                    }
                })();
            }
        }
    }
    return readyList.promise( obj );
};

    其实对于 jQuery 这种形式来说，有点类似于 宁可错杀一千，也不放过一个，在任何状态下尽可能的多监听些事件进行判断，在 DOMContentLoaded，load，readystatechange 以及 doScroll 循环等， 反正有 jQuery.isReady 进行把关么，怕什么。对于该流程进一步了解还需要去了解一下 jquery 的 promise。关于 jQuery 的 callback， defferred的作用和源码。为什么要返回  readyList.promise( obj )，自己思考下吧！