jQuery语法之间的区别

Question

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

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

或

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

Answer 1

有很大的不同：

1. 第一个是立即调用的函数表达式（IIFE）：函数的内容在遇到函数时立即运行。

2. 第二个注册jQuery“ready”回调。在jQuery决定DOM“准备好”之前，不会调用函数的内容。它是ready的缩写。

在这两种情况下，jQuery符号的值都作为$参数传递给函数，因此即使{{1}，您也可以在函数中使用$作为jQuery }} 已经用过。 （在第一种情况下，它在IIFE中明确地完成;在第二种情况下，jQuery在调用回调时执行它。）

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

noConflict

当函数运行时，<script> (function($) { $("#foo").on("click", /*...*/); // Doesn't find the element })(jQuery); </script> <div id="foo">...</div> 元素尚不存在，并且不会附加单击处理程序。但是如果你改为使用#foo版本，jQuery会等到稍后运行该函数的内容。

如果您控制ready代码的去向，则不需要script;相反，只需将ready标记放在文档的末尾，就在结束script标记之前，以便代码运行时代码可能要使用的所有元素已经存在，例如：< / p>

</body>

Answer 2

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

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

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

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

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