版本：jquery1.10.2
时间：2014-02-25
已知$(fn)使用Deferred对象实现，你觉得实现$(fn)的步骤是什么呢？
1.给DOM加载绑定事件回调函数
2.将fn添加到延迟对象Deferred中
3.DOM加载完毕，回调函数调用Deferred.resolveWith()，执行回调函数fn
有点事后诸葛亮的意思哎！不过想想还能怎么做呢！
|
1 |
init 函数中 rootjQuery.ready( selector ); |
|
1
2
3
4 |
ready: function( fn ) { jQuery.ready.promise().done( fn );//给DOM加载绑定回调函数，将fn注册进Deferred对象中，在这一句代码完成了。 return
this;} |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35 |
//给DOM的加载绑定回调函数completed，详细的分析可以看看这篇文字http://www.nowamagic.net/javascript/js_OnDomReady.phpjQuery.ready.promise = function( obj ) { if
( !readyList ) { readyList = jQuery.Deferred(); if
( document.readyState === "complete"
) { setTimeout( jQuery.ready ); } else
if ( document.addEventListener ) { document.addEventListener( "DOMContentLoaded", completed, false
); window.addEventListener( "load", completed, false
); } else
{ document.attachEvent( "onreadystatechange", completed ); window.attachEvent( "onload", completed ); 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) { return
setTimeout( doScrollCheck, 50 ); } detach(); jQuery.ready(); } })(); } } } return
readyList.promise( obj );} |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27 |
function
completed( event ) { if
( document.addEventListener || event.type === "load"
|| document.readyState === "complete"
) { detach(); jQuery.ready(); }}// ready函数实现了最后一步，调用resolveWith，触发延迟对象的回调功能//对于这个函数比较好奇的，可以看看holdReady函数的功能ready: function( wait ) { if
( wait === true
? --jQuery.readyWait : jQuery.isReady ) { return; } if
( !document.body ) { return
setTimeout( jQuery.ready ); } jQuery.isReady = true; if
( wait !== true
&& --jQuery.readyWait > 0 ) { return; } readyList.resolveWith( document, [ jQuery ] ); if
( jQuery.fn.trigger ) { jQuery( document ).trigger("ready").off("ready"); }} |
我们监听DOM加载，DOM加载完毕后进行回调，页面中散落各处的js脚本的执行时机是什么？
这个问题可以参考Html Dom加载 ，下面是我自己测试使用的页面，大家可以想想最终浏览器console打印的顺序是什么。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head> <meta http-equiv="Content-Type"
content="text/html; charset=utf-8"
/> <title>Sizzle Test Suite</title> <script type="text/javascript"
src="js/jquery-1.10.2.js"></script></head><body></body><script type="text/javascript"
> window.onload = function
(){ console.log(1); } $(function(){ console.log(2); }); console.log(3); if
( document.addEventListener ) { document.addEventListener( "DOMContentLoaded", fn1, false
); window.addEventListener( "load", fn2, false
); } function
fn1(){ console.log(‘fn1‘); } function
fn2(){ console.log(‘fn2‘); } setTimeout(function(){ console.log(‘in setTimeout‘); },10000); setTimeout(function(){ $(function(){ console.log(‘in setTimeout jquery‘); }); },10000); </script></html> |
原文：http://www.cnblogs.com/sudo/p/3567733.html