$('document').ready情况下的.ready最佳实践

Question

我正在研究jQuery的最佳实践，并找到了这文章格雷格·弗兰科

通常情况下，我会：

$("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

立即调用函数表达式(IIFEs)

IIFE是在本地定义全局变量/属性和保护JavaScript代码库不受外部干扰(例如第三方库)的理想解决方案。如果您正在编写将在许多不同环境中运行的jQuery代码(例如，jQuery插件)，那么使用IIFE对本地作用域jQuery非常重要，因为您不能假设每个人都在使用$ to别名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

如果您不喜欢滚动到源文件的底部以查看要传递给您的like的全局变量/属性，您可以这样做：

   // 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的信息，您可以阅读我的博客文章，名为我爱我的生活。

jQuery就绪事件

许多开发人员将所有代码打包到jQuery就绪事件中，如下所示：

   $("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!
  });

如果您正在执行上述任何一种模式，那么您应该考虑将不依赖于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最佳实践博客文章：http://gregfranko.com/blog/jquery-best-practices/

Answer 2

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

将window.jQuery作为第一个参数传递给您的生命(立即调用的函数表达式)，并在IIFE中将其命名为$，只允许您使用jQuery而不干扰分配给全局$的其他库。如果您不使用任何其他为全局$分配自己的库，那么您的生命的第一个参数就不会有任何用处。

将window和document传递给您的IIFE将允许JS小型化器将您的代码转换成这样的东西(没有空格)，这给您提供了稍微好一点的压缩：

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

除非您广泛使用window和document，否则我只需要：

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

Answer 3

1. $(function(){})等同于$('document').ready(function(){});。这取决于您使用哪一种，但后者是这两种中较老的一种，而启动则更冗长。
2. 您列出的第二种方法是显式尝试阻止全局变量，并注入已知的全局变量$、window和document。建议这样做是为了提高人们对引入全局语言的容易程度的认识，并尽可能地对我们向页面注入的代码进行“清理”。另外，请注意，如果您遵循所显示的注释，则第二种方法不等同于第一种方法。因为$是作为参数插入的，所以此代码与其他可能希望拥有$符号的库兼容。

特别是，// The rest of the code goes here位于文档准备好之前或触发该事件之前可能执行的位置。将其放入传递给$的函数中。