在$('document')的情况下jQuery最佳实践.准备好了

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

立即调用函数表达式(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的更多信息,您可以阅读我的帖子,题为" 我爱我的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

1. $(function(){})相当于$('document').ready(function(){});.这取决于你使用的,但后者是两者中较老的一个,并且更加冗长.

2. 您列出的第二种方法是一个明确的企图阻止全局变量,并注入已知的全局$,window和document.建议这样可以提高对全局变量的引入的认识,并尽可能地为我们注入页面的代码提供"洁净室".另请注意,如果您按照显示的注释,第二种方法不等同于第一种方法.因为$是作为参数插入的,所以此代码与可能希望拥有$符号的其他库兼容.

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