Question

我正在研究jQuery最佳做法，并找到this文章by Greg Franko

通常，我这样做：

$("document").ready(function() {
    // The DOM is ready!
    // The rest of the code goes here
});

但文章建议使用：

// IIFE - Immediately Invoked Function Expression
(function($, window, document) {

    // The $ is now locally scoped 

    // Listen for the jQuery ready event on the document
    $(function() {

        // The DOM is ready!

    });

    // The rest of the code goes here!

}(window.jQuery, window, document));
// The global jQuery object is passed as a parameter

我可以看到那里的评论，但我无法弄清楚它到底在说什么。

那么，哪种方法更好，为什么呢？

我知道这两种方法都有效，但第二种方法如何成为更好？

Answer 1

立即调用函数表达式（IIFE）

IIFE是本地确定全局变量/属性并保护JavaScript代码库免受外部干扰（例如第三方库）的理想解决方案。如果您正在编写将在许多不同环境（例如jQuery插件）中运行的jQuery代码，那么使用IIFE来本地扩展jQuery非常重要，因为您不能假设每个人都使用$来使用别名jQuery。您将如何做到这一点：

   // IIFE - Immediately Invoked Function Expression
  (function($, window, document) {
      // The $ is now locally scoped

      // The rest of your code goes here!

  }(window.jQuery, window, document));
  // The global jQuery object is passed as a parameter

如果您不想滚动到源文件的底部以查看传递给IIFE的全局变量/属性，可以执行以下操作：

   // IIFE - Immediately Invoked Function Expression
  (function(yourcode) {

      // The global jQuery object is passed as a parameter
      yourcode(window.jQuery, window, document);

      }(function($, window, document) {

          // The rest of your code goes here!

      }
  ));

要了解有关IIFE的更多信息，您可以阅读我的帖子标题为I Love My IIFE。

jQuery Ready事件

许多开发人员将所有代码都包含在jQuery ready事件中，如下所示：

   $("document").ready(function() {
      // The DOM is ready!
      // The rest of your code goes here!
  });

或者像这样的较短版本：

   $(function() {
      // The DOM is ready!
      // The rest of your code goes here!
  });

如果您正在执行上述任一模式，那么您应该考虑在ready事件处理程序之外移动不依赖于DOM的应用程序部分（例如方法）。像这样：

   // IIFE - Immediately Invoked Function Expression
  (function(yourcode) {

      // The global jQuery object is passed as a parameter
      yourcode(window.jQuery, window, document);

      }(function($, window, document) {

          // The $ is now locally scoped 
          $(function() {

              // The DOM is ready!

          });

          // The rest of your code goes here!

      }
  ));

这种模式使得更容易分离你的逻辑（从代码设计角度来看），因为不是所有内容都必须包含在单个事件处理程序回调函数中。它还将提高应用程序的页面加载性能，因为并非所有内容都需要立即初始化。一个很好的例子是延迟绑定DOM事件处理程序，当DOM准备就绪时不需要绑定。

改编自我的jQuery Best Practices博客文章：http://gregfranko.com/blog/jquery-best-practices/

Answer 2

您的代码与“建议”方法之间的唯一区别是兼容性和可能更好的压缩。没有速度差异。

将window.jQuery作为IIFE的第一个参数（立即调用的函数表达式）并在IIFE中命名为$，只允许您使用jQuery而不会干扰其他自己的库全球$。如果您不使用任何其他将自己分配给全局$的库，则IIFE的第一个参数不会用于任何目的。

将window和document传递给您的IIFE将允许JS minifiers将您的代码转换为类似的东西（没有空格），这会给您稍微更好的压缩：

(function(a, b, c) {
    a(c).ready(function() {
        // ...
    });
})(window.jQuery, window, document);

除非您广泛使用window和document，否则我会这样做：

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

Answer 3

$(function(){})相当于$('document').ready(function(){});。这取决于你使用的，但后者是两者中较老的，并且更加冗长。
您列出的第二种方法是明确尝试阻止全局变量，并注入已知的全局变量$，window和document。建议这样可以提高对全局变量的引入的认识，并尽可能地为我们注入页面的代码提供“洁净室”。另请注意，如果您按照显示的注释，第二种方法不等同于第一种方法。因为$是作为参数插入的，所以此代码与可能希望拥有$符号的其他库兼容。

特别是，// The rest of the code goes here位于文档准备好之前或触发该事件之前可以执行的位置。把它放在传递给$。的函数里面。

Answer 4

您的链接有anwser：

以下是好的，

如果您知道代码运行的环境。

如果您不关心页面加载性能。

如果您不关心最佳做法。

 $("document").ready(function() {
    // The DOM is ready!
    // The rest of the code goes here
  });

但他们建议，最好像下面这样使用，如果您不知道代码运行的环境和

更好的页面加载性能

// IIFE - Immediately Invoked Function Expression
  (function($, window, document) {

    // The $ is now locally scoped 

   // Listen for the jQuery ready event on the document
   $(function() {

     // The DOM is ready!

   });

   // The rest of the code goes here!

  }(window.jQuery, window, document));
  // The global jQuery object is passed as a parameter

Answer 5

如果你使用$作为jQuery的别名那么

   $(document).ready(function(){})

与

相同

  (function($, window, document) {

  // The $ is now locally scoped 

 // Listen for the jQuery ready event on the document
  $(function() {

    // The DOM is ready!

  });

  // The rest of the code goes here!

 }(window.jQuery, window, document));

正如前面的回答所指出的那样，第二种方法使你免于为jQuery自由使用$别名，因为它将jQuery对象传递给立即调用的函数表达式，这基本上将变量和代码保存在其中是私有的，而不是污染全局命名空间。

简而言之，如果您使用第一种方法并使用$使用其他库，则会以冲突结束。

Answer 6

在极少数情况下，你将不得不处理一个较旧的jQuery版本（如果我没记错的话 - 在1.8.X之前），每当你指定两个document.ready块时，只会触发第一个IE9。

现在这是我经历过一次或两次的罕见错误，我无法重现，但我认为值得注意。

Answer 7

基于Jquery文档：

All three of the following syntaxes are equivalent:

$(document).ready(handler)
$().ready(handler) (this is not recommended)
$(handler)

http://api.jquery.com/ready/

Answer 8

它被称为self ivoking或immediately invoked函数。这意味着该函数在使用最后一组括号中的参数创建后立即运行。

阅读Javascript Self Invoking Functions，Immediately-Invoked Function Expression (IIFE)将清除使用位置以及如何使用这些功能

Answer 9

您可以使用jquery使用文档就绪事件，文档完全加载时会发生事件。

 $(function () {
    setTimeout(function () {
        // your code
    }, 0);
})

在$（'document'）的情况下jQuery最佳实践。准备好了

9 个答案: