jquery - jQuery 语法之间的区别

Question

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

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

或

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

Answer 1

有很大的区别:

1. 第一个是立即调用函数表达式 (IIFE):一旦遇到该函数，就会运行该函数的内容。

2. 第二个注册 jQuery“就绪”回调。在 jQuery 确定 DOM 已“就绪”之前，不会调用该函数的内容。它是 ready 的简写.

在这两种情况下， jQuery 的值符号作为 $ 传递到函数中参数，所以你可以使用 $对于函数内的 jQuery，即使 noConflict已经用过。 (在第一种情况下，它是在 IIFE 中明确完成的；在第二种情况下，jQuery 在调用回调时执行此操作。)

有时第二个函数会“起作用”，而第一个函数不能起作用，原因是该函数的内容在 DOM 中查找元素，而在第一种情况下，该元素可能不存在。考虑:

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

当函数运行时，#foo元素尚不存在，并且不会附加单击处理程序。但如果你做了 ready相反，jQuery 会等到稍后才运行该函数的内容。

如果您控制script的位置标签去，你不需要 ready ;相反，只需输入 script标签位于文档末尾，就在结束之前 </body>标签，以便代码可能想要使用的所有元素在代码运行时已经存在，例如:

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