【www.bbyears.com--jquery】
对于 jQuery 使用中 $( function(){} ) 的形式我们都不陌生，将事件函数绑定在 dom 加载完毕的时刻，相对于 window.onload 来讲可以避免一些图片，动态脚本，以及一些外部资源等加载对于当前代码执行带来的较大的延时影响，因为 window.onload 是需要等当前页面需要加载的资源全部加载结束后才触发执行，包括 onload 触发之前执行的动态加载。
对于标准浏览器，具有 DOMContentLoaded 事件来作为 dom 加载完毕后触发的事件，当然准确点说的话是 dom 和 非动态加载的JS 加载完毕时刻触发（关于触发时机可以看这里 JS、CSS以及img对DOMContentLoaded 事件的影响）。
当然低版本的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 时刻。
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 )，自己思考下吧！