本文链接http://www.cnblogs.com/Bond/p/4178311.html
jquery document ready的实现其很很简,虽说简单,其很很多人还是没去关注过它的实现。我现在闲来无事就闲扯一下jquery document ready的实现。在低版本1.XX的实现和2.XX的略有不同,这里以2.1.1为准
平时一般都会这样写,一般就这两种方式
$(document).ready(function(){ //do something }) $(function(){ //do something })
分析源码发现其实以上两种写法是一样的效果,所以推荐使用第二组写法,更为简洁。
发现最后都是$(document).ready(),为了找到实现,我们就要找到JQuery.fn.ready的实现,于是我们找到了这小段
不难发现最后都是调用了jQuery.ready.promise().done( fn );
显然这里得找到jQuery.ready.promise,其实jQuery.ready.promise()返回了一个promise对象然后done(fn) 其实就是向里面添加回调函数,最终也是调用的Callback的add,
根据上面的推测我们找到了一下这段代码实现
调用jQuery.ready.promise(),进入函数判断readyList是否已经存在,不存在就创建一个deferred对象赋给readyList,此时readyList就是一个Deferred实例对象
往下判断document.readyState === "complete" 如果未true 就执行setTimeout( jQuery.ready ); 稍后分析jQuery.ready这个挂在到JQuery上的静态方法
下面就是给document 和window分别添加相应的事件和回调,由于这里只支持高级浏览器,所以简化了很多只有两句话
document.addEventListener( "DOMContentLoaded", completed, false );
window.addEventListener( "load", completed, false );
最终返回return readyList.promise( obj ),所有的DOM ready 的回调都添加到了readyList上面; 这里依赖了JQuery Deferred模块,JQuery Deferred又依赖于Callback. 有兴趣可以去看看它们的实现,还是很有技巧性的,值得一看,这里就不扯那个,一扯就停不下来了。
其实就是返回deferred.promise(obj) ,通过 deferred.promise() 方法返回的 deferred promise 对象,是没有 resolve ,reject, progress , resolveWith, rejectWith , progressWith 这些可以改变状态的方法,你只能使用 done, then ,fail 等方法添加 handler 或者判断状态。
这里我们发现最终当DOMContentLoaded 会执行completed 其实completed 最后也是执行jQuery.ready();
最后我们只需要扒开jQuery.ready神秘的面纱,dom ready的最后的实现就迎刃而解了。
于是我们又找到了这段代码
以下简单分析一下它的实现
前面直接调用jQuery.ready(),进入这个函数后第一个判断为false,往下走jQuery.isReady = true; 标记isReady =true, 第二个if也直接跳过,最后执行readyList.resolveWith( document, [ jQuery ] );
这句话是最后的核心,readyList之前被赋值为了Deferred对象的一个实例,这里执行resolveWith() 这里简单说下,resolveWith内部其实就是 jQuery.Callbacks("once memory"),然后resolveWith就是fireWith
知道最后调用的上下文和参数,最终执行之前添加到readyList里面的所有回调。
readyList内部的
[ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ],
[ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ],
[ "notify", "progress", jQuery.Callbacks("memory") ]
其它的都忽略 只关注这个jQuery.Callbacks("once memory")
我们所有的$(fn) fn都是加到了 jQuery.Callbacks("once memory") 里面,一旦执行过一次fire第二次调用fire就不会有作用,如果调用过fire在add(fn) 这个fn会立即执行。
所以:document ready只会执行一次,一旦执行过在再次$(fn)此时 fn会立即执行。
一个简单的document ready jqeury的实现还是比较绕的,内部依赖了Deferred, 不清楚Deferred的人看来会感觉晕晕的,其实我们可以抛开Deferred 再来看就会觉得简单许多。