jQuery document.ready vs自調用匿名函數

Question

這兩者有什么區別。

這兩個函數同時被調用嗎？ 我知道，當瀏覽器呈現整個HTML頁面時會觸發document.ready，但第二個函數（自調用匿名函數）會怎樣。 是否等待瀏覽器完成呈現頁面，或者只要遇到它就會調用它？

Answer 1

$(document).ready(function(){ ... }); 或短 $(function(){...});
當DOM is ready時調用此函數，這意味着您可以開始查詢元素。 .ready()將在不同的瀏覽器上使用不同的方式來確保DOM真的准備就緒。
(function(){ ... })();

這只不過是一個在瀏覽器解釋你的ecma-/javascript時盡快調用自身的函數。 因此，你不太可能在這里成功地對DOM elements采取行動。

Answer 2

(function(){...})(); 將在Javascript中遇到它后立即執行。

加載文檔后，將執行$(document).ready() 。 $(function(){...}); 是$(document).ready()的快捷方式，並完全相同。

Answer 3

$(document).ready(function() { ... }); 簡單地將該函數綁定到文檔的ready事件，因此，正如您所說，當文檔加載時，事件會觸發。
(function($) { ... })(jQuery); 實際上是Javascript的一個構造，所有這段代碼都是將jQuery對象作為參數傳遞給function($)並運行函數，因此在該函數中， $ always總是引用jQuery對象。 這有助於解決命名空間沖突等問題。

因此，＃1在文檔加載時執行，而＃2立即運行， jQuery對象名為$ as shorthand。

Answer 4

當DOM（Document對象模型）准備好執行JavaScript代碼時，將執行以下代碼。

$(document).ready(function(){
  // Write code here
});

以上代碼的簡寫是：

$(function(){
  // write code here
});

下面顯示的代碼是一個自我調用的匿名JavaScript函數，一旦瀏覽器解釋它就會執行：

(function(){
  //write code here
})();   // It is the parenthesis here that call the function.

下面顯示的jQuery自調用函數將全局jQuery對象作為參數傳遞給function($) 。 這使得$可以在自調用函數中本地使用，而無需遍歷定義的全局范圍。 jQuery不是唯一使用$庫，因此這可以減少潛在的命名沖突。

(function($){
  //some code
})(jQuery);

Answer 5

在DOM“構建”之后運行document.ready。 自我調用函數立即運行 - 如果在構造DOM之前插入<head> 。