javascript - $ ('document' 情况下的 jQuery 最佳实践)。就绪

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 就绪事件

许多开发人员将他们的所有代码包装在 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!

      }
  ));

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

改编 self 的 jQuery 最佳实践博文:http://gregfranko.com/blog/jquery-best-practices/