這篇文章主要介紹了JavaScript的jQuery庫中ready方法的學習教程,包括ready的相關簡短寫法,rally cool,需要的朋友可以參考下

學習 jQuery 有許多途徑，我們今天從 jQuery 的 ready 函數開始。本例中的代碼都來自于 jQuery 腳本庫。

如果你使用過 jQuery , 就必然使用過 ready 函數，它用來注冊當頁面準備好之后可以執行的函數。

問題來啦，我們的頁面什么時候準備好了呢?

onload 事件

最基本的處理方式就是頁面的 onload 事件，我們在處理這個事件的時候，可以有多種方式，即可以通過 HTML 方式，直接寫在 body 元素的開始標記中，也可以使用事件注冊的方式來使用，這又可以分為 DOM0 方式和 DOM2 方式。再考慮到瀏覽器的兼容性，使用 DOM2 方式寫出來，如下所示。

1. if (document.addEventListener) { 
2. // A fallback to window.onload, that will always work 
3. window.addEventListener("load", jQuery.ready, false); 
4.  
5. // If IE event model is used 
6. } else { 
7. // A fallback to window.onload, that will always work 
8. window.attachEvent("onload", jQuery.ready); 
9. } 

DOMContentLoaded 事件

不過 onload 事件要等到所有頁面元素加載完成才會觸發, 包括頁面上的圖片等等。如果網頁上有大量的圖片，效果可想而知，用戶可能在沒有看到圖片的時候，就已經開始操作頁面了，而這時我們的頁面還沒有初始化，事件還沒有注冊上，這豈不是太晚了!

除了大家熟知的 onload 事件之外， 與 DOM 中的 onload 事件相近的，我們還有 DOMContentLoaded 事件可以考慮， 基于標準的瀏覽器支持這個事件, 當所有 DOM 解析完以后會觸發這個事件。

這樣，對于基于標準的瀏覽器來說，我們還可以注冊這個事件的處理。這樣，我們可能更早地捕獲到加載完成的事件。

1. if (document.addEventListener) { 
2. // Use the handy event callback 
3. document.addEventListener("DOMContentLoaded", DOMContentLoaded, false); 
4.  
5. // A fallback to window.onload, that will always work 
6. window.addEventListener("load", jQuery.ready, false); 
7. } 

onreadystatechange 事件

不標準的瀏覽器怎么辦呢?

如果瀏覽器存在 document.onreadystatechange 事件，當該事件觸發時，如果 document.readyState=complete 的時候，可視為 DOM 樹已經載入。

不過，這個事件不太可靠，比如當頁面中存在圖片的時候，可能反而在 onload 事件之后才能觸發，換言之，它只能正確地執行于頁面不包含二進制資源或非常少或者被緩存時作為一個備選吧。

1. if (document.addEventListener) { 
2. // Use the handy event callback 
3. document.addEventListener("DOMContentLoaded", DOMContentLoaded, false); 
4.  
5. // A fallback to window.onload, that will always work 
6. window.addEventListener("load", jQuery.ready, false); 
7.  
8. // If IE event model is used 
9. } else { 
10. // Ensure firing before onload, maybe late but safe also for iframes 
11. document.attachEvent("onreadystatechange", DOMContentLoaded); 
12.  
13. // A fallback to window.onload, that will always work 
14. window.attachEvent("onload", jQuery.ready); 
15. } 

DOMContentLoaded 函數在做什么呢?最終還是要調用 jQuery.ready 函數。

1. DOMContentLoaded = function() { 
2. if ( document.addEventListener ) { 
3. document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false ); 
4. jQuery.ready(); 
5. } else if ( document.readyState === "complete" ) { 
6. // we're here because readyState === "complete" in oldIE 
7. // which is good enough for us to call the dom ready! 
8. document.detachEvent( "onreadystatechange", DOMContentLoaded ); 
9. jQuery.ready(); 
10. } 
11. }  

doScroll 檢測法

MSDN 關于 JScript 的一個方法有段不起眼的話，當頁面 DOM 未加載完成時，調用 doScroll 方法時，會產生異常。那么我們反過來用，如果不異常，那么就是頁面DOM加載完畢了!

Diego Perini 在 2007 年的時候，報告了一種檢測 IE 是否加載完成的方式，使用 doScroll 方法調用。詳細的說明見這里。

原理是對于 IE 在非 iframe 內時，只有不斷地通過能否執行 doScroll 判斷 DOM 是否加載完畢。在本例中每間隔 50 毫秒嘗試去執行 doScroll，注意，由于頁面沒有加載完成的時候，調用 doScroll 會導致異常，所以使用了 try -catch 來捕獲異常。

1. (function doScrollCheck() { 
2. if (!jQuery.isReady) { 
3.  
4. try { 
5. // Use the trick by Diego Perini 
6. // http://javascript.nwbox.com/IEContentLoaded/ 
7. top.doScroll("left"); 
8. } catch (e) { 
9. return setTimeout(doScrollCheck, 50); 
10. } 
11.  
12. // and execute any waiting functions 
13. jQuery.ready(); 
14. } 
15. })(); 

document.readyState 狀態

如果我們注冊 ready 函數的時間點太晚了，頁面已經加載完成之后，我們才注冊自己的 ready 函數，那就用不著上面的層層檢查了，直接看看當前頁面的 readyState 就可以了，如果已經是 complete ，那就可以直接執行我們準備注冊的 ready 函數了。不過 ChrisS 報告了一個很特別的錯誤情況，我們需要延遲一下執行。

setTimeout 經常被用來做網頁上的定時器，允許為它指定一個毫秒數作為間隔執行的時間。當被啟動的程序需要在非常短的時間內運行，我們就會給她指定一個很小的時間數，或者需要馬上執行的話，我們甚至把這個毫秒數設置為0，但事實上，setTimeout有一個最小執行時間，當指定的時間小于該時間時，瀏覽器會用最小允許的時間作為setTimeout的時間間隔，也就是說即使我們把setTimeout的毫秒數設置為0，被調用的程序也沒有馬上啟動。

這個最小的時間間隔是多少呢?這和瀏覽器及操作系統有關。在John Resig的新書《Javascript忍者的秘密》一書中提到

Browsers all have a 10ms minimum delay on OSX and a(approximately) 15ms delay on Windows.(在蘋果機上的最小時間間隔是10毫秒，在Windows系統上的最小時間間隔大約是15毫秒)

，另外，MDC中關于setTimeout的介紹中也提到，Firefox中定義的最小時間間隔(DOM_MIN_TIMEOUT_VALUE)是10毫秒，HTML5定義的最小時間間隔是4毫秒。既然規范都是這樣寫的，那看來使用setTimeout是沒辦法再把這個最小時間間隔縮短了。

這樣，通過設置為 1, 我們可以讓程序在瀏覽器支持的最小時間間隔之后執行了。

1. // Catch cases where $(document).ready() is called after the browser event has already occurred. 
2. // we once tried to use readyState "interactive" here, but it caused issues like the one 
3. // discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15 
4. if (document.readyState === "complete") { 
5. // 延遲 1 毫秒之后，執行 ready 函數 
6. setTimeout(jQuery.ready, 1); 
7. }  

完整的代碼

在 jQuery 中完整的代碼如下所示。位于 jQuery 1.8.3 源代碼的 #842 行。

1. jQuery.ready.promise = function( obj ) { 
2. if ( !readyList ) { 
3.  
4. readyList = jQuery.Deferred(); 
5.  
6. // Catch cases where $(document).ready() is called after the browser event has already occurred. 
7. // we once tried to use readyState "interactive" here, but it caused issues like the one 
8. // discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15 
9. if ( document.readyState === "complete" ) { 
10. // Handle it asynchronously to allow scripts the opportunity to delay ready 
11. setTimeout( jQuery.ready, 1 ); 
12.  
13. // Standards-based browsers support DOMContentLoaded 
14. } else if ( document.addEventListener ) { 
15. // Use the handy event callback 
16. document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false ); 
17.  
18. // A fallback to window.onload, that will always work 
19. window.addEventListener( "load", jQuery.ready, false ); 
20.  
21. // If IE event model is used 
22. } else { 
23. // Ensure firing before onload, maybe late but safe also for iframes 
24. document.attachEvent( "onreadystatechange", DOMContentLoaded ); 
25.  
26. // A fallback to window.onload, that will always work 
27. window.attachEvent( "onload", jQuery.ready ); 
28.  
29. // If IE and not a frame 
30. // continually check to see if the document is ready 
31. var top = false; 
32.  
33. try { 
34. top = window.frameElement == null && document.documentElement; 
35. } catch(e) {} 
36.  
37. if ( top && top.doScroll ) { 
38. (function doScrollCheck() { 
39. if ( !jQuery.isReady ) { 
40.  
41. try { 
42. // Use the trick by Diego Perini 
43. // http://javascript.nwbox.com/IEContentLoaded/ 
44. top.doScroll("left"); 
45. } catch(e) { 
46. return setTimeout( doScrollCheck, 50 ); 
47. } 
48.  
49. // and execute any waiting functions 
50. jQuery.ready(); 
51. } 
52. })(); 
53. } 
54. } 
55. } 
56. return readyList.promise( obj ); 
57. }; 

那么，又是誰來調用呢?當然是需要的時候，在我們調用 ready 函數的時候，才需要注冊這些判斷頁面是否完全加載的處理，這段代碼在 1.8.3 中位于代碼的 #244 行，如下所示：

1. ready: function( fn ) { 
2. // Add the callback 
3. jQuery.ready.promise().done( fn ); 
4.  
5. return this; 
6. } 

在頁面上引用 jQuery 腳本庫之后，執行了 jQuery 的初始化函數，初始化函數中創建了 ready 函數。我們在通過 ready 函數注冊事件處理之前，jQuery 完成了頁面檢測代碼的注冊。這樣。當頁面完全加載之后，我們注冊的函數就被調用了。

jQuery Ready 方法的簡短寫法

寫 jQuery 代碼的時候，一般要寫一個 Ready 方法，以確保 DOM 已加載完畢，然后再執行相應的 jQuery 代碼。Ready 方法一般寫法如下：

1. $(document).ready(function() { 
2. // 從這里開始 
3. }); 

但是在看其他人寫的 jQuery 代碼的時候，經常又會看到如下寫法：

1. $(function() { 
2. // 從這里開始 
3. }); 

第二種寫法雖然簡短了許多，但是在功能上和第一種寫法是等價的，如果你不相信，可以看一下 jQuery 的源代碼中有如下代碼片段：

1. // HANDLE: $(function) 
2. // Shortcut for document ready  
3. if ( jQuery.isFunction( selector ) ) { 
4. return rootjQuery.ready( selector ); 
5. } 

如果傳入選擇器中的參數是一個函數，那么會自動返回一個 rootjQuery.ready( selector )，而 rootjQuery 又是 jQuery(document) 的一個引用，所以這里就相當于調用 jQuery(document).ready() 方法，而之前的那個匿名方法亦被傳入其中以備執行。

這種簡短寫法雖說減少了了一點代碼量，但是可讀性稍差，所以我個人還是傾向于前面的第一種寫法，特別是在團隊開發中，僅僅是為了語意明確。