jQuery document.ready vs自调用匿名函数

Question

这两者有什么区别.

这两个函数同时被调用吗？我知道,当浏览器呈现整个HTML页面时会触发document.ready,但第二个函数(自调用匿名函数)会怎样.是否等待浏览器完成呈现页面,或者只要遇到它就会调用它？

Answer 1

$(document).ready(function(){ ... }); 或短 $(function(){...});

当这个函数被调用时DOM is ready,你可以开始查询元素..ready()将在不同的浏览器上使用不同的方式来确保DOM真正准备就绪.
(function(){ ... })();

这只不过是一个在浏览器解释时尽快调用自身的函数ecma-/javascript.因此,你不太可能成功地在DOM elements这里采取行动.

@skube是的,任何JS代码都会在解析器读取后立即运行,但是在SIAF前面是否有"$"可能会引起混淆.如果是这样,并且这个站点正在使用jQuery,那么这是jQuery document.ready帮助函数的缩写形式,它将调度给定的函数在DOM可用时执行.辅助函数本身会在读取后立即运行,但是你用它提供的函数不会. (2认同)

Answer 2

(function(){...})(); 将在Javascript中遇到后立即执行.

$(document).ready()将在加载文档后执行. $(function(){...});是一个快捷方式,$(document).ready()并做同样的事情.

Answer 3

$(document).ready(function() { ... });简单地将该函数绑定到ready文档的事件,因此,正如您所说,当文档加载时,事件会触发.
(function($) { ... })(jQuery);实际上是Javascript的构造,并且所有代码片段都将jQuery对象function($)作为参数传递并运行函数,因此在该函数内部$始终引用该jQuery对象.这有助于解决命名空间冲突等问题.

因此,#1在文档加载时执行,而#2立即运行,jQuery对象名为$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.<head>在构造DOM之前,自动调用函数会立即运行(如果插入).

+1来对抗不必要的downvote.但是,你的答案有一个小问题.自解调函数将在解析时在任何位置执行,并且不一定必须在`<head>`内部,并且在构造初始DOM之后规则也没有区别. (6认同)