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> 。