自执行函数作为jQuery文档就绪回调函数

Question

什么是两者之间的区别？

$(function() {
    // bind some event listeners
});

并且

$(function() {
    // bind some event listeners
}());

- Aram810

---

你的第二个例子将执行函数的结果（该结果也必须是一个函数）。 - yoavmatchulsky

Answer 1

$(function() {
    // bind some event listeners
});

在上述情况下，该函数被传递给jQuery，一旦文档准备就绪，该函数将被执行。

$(function() {
    // bind some event listeners
}());

在上述情况中，函数的返回值被传递给jquery。由于函数是自执行的，它将立即执行，无论函数返回什么都将传递给jquery，因此这不是一个好方法，因为目标是在文档准备就绪后执行函数，而这种情况并没有发生。

- Saurabh Verma

Answer 2

$(function(){...}); OR $(document).ready(function(){ ... });

当DOM准备就绪时，将调用此函数，这意味着您可以开始查询元素。.ready()将在不同的浏览器上使用不同的方式来确保DOM确实已准备就绪。

(function(){ ... })();

这实际上是一个函数，会在浏览器解析JavaScript时尽快调用自身。因此，在此处成功操作DOM元素的可能性非常小。

- haMzox

Answer 3

$(function() {
    // bind some event listeners
});

这个代码只有在DOM完全加载后才会执行，它是以下代码的快捷方式：

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

---

$(function() {
    // bind some event listeners
}());

这个跟前面那个差不多，只不过$()里面的函数是自调用函数。通常是为了防止变量名冲突，因为它会创建一个新的作用域。

- Allan Raquin

Answer 4

$(function() { ... });

这只是jQuery的简写形式：

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

立即调用函数表达式（Immediately-invoked function expression，或IIFE），相反地，是“立即执行”的表达式，惯例是将其括在括号中，但每种类型的表达式都会立即执行，参见以下IIFE函数：

(function() {
    console.log("IIFE 1");
}());

+function() {
    console.log("IIFE 2");
}();

1-function() {
    console.log("IIFE 3");
}();

var f = 50 * function() {
    console.log("IIFE 4");
}();

我希望这很清楚，再见。

- Alessandro