jQuery语法之间的区别

Question

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

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

要么

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

Answer 1

有一个很大的区别:

1. 第一个是立即调用的函数表达式(IIFE):函数的内容在遇到函数时立即运行.

2. 第二个注册jQuery"ready"回调.在jQuery决定DOM"准备好"之前,不会调用函数的内容.这是一个简写ready.

在这两种情况下,jQuery符号的值都作为$参数传递给函数,因此$即使noConflict已经使用了函数,也可以在函数中使用jQuery .(在第一种情况下,它在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>