jQuery 的开始标签之间的区别以及它如何影响代码答案

【问题标题】：Difference between opening tags of jQuery and how it impacts codejQuery 的开始标签之间的区别以及它如何影响代码
【发布时间】：2021-03-25 16:46:21
【问题描述】：

jquery 脚本开头有什么区别：

1. jQuery(function($){
2. (function($) {
3. jQuery(document).ready(function($) {
4. $(document).ready(function() {

为什么如果我使用一个会阻止代码的某些部分工作，而使用另一个会阻止另一部分代码工作？

【问题讨论】：

第二个不一样，因为它不等待文档准备好。其他 3 个是等效的，除非您将 $ 重新分配给 jQuery 以外的其他对象。
这四个中的三个请参见the documentation。您列出的所有三个都已弃用 $(function() { /*...*/ }); 您的第二个可能是破坏的，因为它在运行其代码之前不会等待“就绪”事件（如果我对代码如何进行合理假设使用结束）。
你也可以使用jQuery($ => { ...（如果你不使用IE11）

标签： jquery

【解决方案1】：

来自the documentation：

jQuery 提供了几种附加函数的方法，该函数将在 DOM 准备好时运行。以下所有语法都是等效的：
$( handler )
$( document ).ready( handler )
$( "document" ).ready( handler )
$( "img" ).ready( handler )
$().ready( handler )
从 jQuery 3.0 开始，只推荐第一种语法；其他语法仍然有效，但已弃用。

有关上述内容的更多信息，请参阅this very closely related question's answers。

您列出的其中一个不是特定于 jQuery 的。如果我对你如何结束它做出合理的假设：

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

...它不会在运行代码之前等待 jQuery 的“就绪”事件，它会立即运行。我猜那是不适合你的那个。

请注意，如果您控制运行您的代码的 script 标记，那么所有这些充其量都是过时的（甚至可以说是不必要的）：相反，请执行以下操作之一（最好先执行）；

在现代浏览器上，在script 标签上使用type="module"，这样您的代码就可以在一个独立的模块中运行（并且在严格模式下）。这也将推迟运行代码，直到 DOM 被完全解析之后（如 defer，参见 #2）。
在您的script 标签上使用defer；在完全解析 DOM 之前，浏览器不会运行代码。（注意：为此，您的代码必须位于外部.js 文件中，而不是内联在script 标记中。[上面的type="module" 不是这样。]）
如果您必须支持严重过时的浏览器，请将您的 script 标记放在文档的末尾，就在结束 </body> 标记之前。这样一来，在它之前的所有内容都被解析并到位之前，代码不会运行。

【讨论】：

【解决方案2】：

#2 不等待文档准备好。这是一个 IIFE，它创建了一个绑定了 $ 的本地作用域（可能是参数列表中的 jQuery），但该函数会立即执行（除非它包含像 $(function...) 或 $(document).ready(function...) 这样的调用）。

另外 3 个在执行回调函数之前等待文档准备好。 #1 和#3 可用于$ 已分配jQuery 以外的其他内容的上下文中；在回调函数内部，它将自动绑定到jQuery。 #4 假设$ 是jQuery。

请参阅Are $(function(){}); and $("document").ready(function(){}); the same?，了解有关等待文档准备就绪的不同方式的信息。

【讨论】：