jQuery 语法之间的差异

Question

我只是想知道这两者有什么区别？有时，只有第二个版本有效：

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

或

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

Answer 1

区别很大：

第一个是立即调用的函数表达式（IIFE）：一旦遇到函数，函数的内容就是运行。
第二个注册一个 jQuery "ready" 回调。在 jQuery 确定 DOM 为 "ready" 之前，不会调用函数的内容。这是 ready 的 shorthand。

在这两种情况下，jQuery 符号的值作为 $ 参数传递给函数，因此您可以在 jQuery 中使用 $即使使用了 noConflict 功能。（在第一种情况下，它是在 IIFE 中明确完成的；在第二种情况下，jQuery 在调用回调时执行。）

有时第二个会 "work" 而第一个不会的原因是函数的内容在 DOM 中查找元素，而在第一种情况下可能不是那里。考虑：

<script>
(function($) {
  $("#foo").on("click", /*...*/); // Doesn't find the element
})(jQuery);
</script>
<div id="foo">...</div>

当函数运行s 时，#foo 元素还不存在，点击处理程序将不会被附加。但是，如果您改用 ready 版本，jQuery 将等待运行函数的内容，直到稍后。

如果您控制 script 标签的位置，则不需要 ready；相反，只需将 script 标记放在文档的末尾，就在结束 </body> 标记之前，这样当代码运行时，代码可能要使用的所有元素都已经存在s，例如：

<div id="foo">...</div>
<!-- ... -->
<script>
(function($) {
  $("#foo").on("click", /*...*/); // DOES find the element
})(jQuery);
</script>
</body>

Answer 2

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

这是一个自调用函数，您将 jQuery 作为参数传入。

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

这是 jQuery 的 document.ready 处理程序的快捷方式。

两者之间的主要区别在于第一个示例中的代码将立即为运行，而当 DOM 为准备好。因此，如果您在第一个块中的代码依赖于 DOM 中某些元素的存在，它将失败。

Difference Between jQuery Syntax