javascript - 为什么要定义一个匿名函数并将 jQuery 作为参数传递给它？

Question

我正在浏览来自 backbone.js 截屏视频的优秀 peepcode 演示代码。其中， Backbone 代码全部包含在传递给 jQuery 对象的匿名函数中:

(function($) {
  // Backbone code in here
})(jQuery);

在我自己的主干代码中，我刚刚将所有代码包装在 jQuery DOM“就绪”事件中:

$(function(){
  // Backbone code in here
});

第一种方法的要点/优势是什么？这样做会创建一个匿名函数，然后立即执行该函数并将 jQuery 对象作为函数参数传递，从而有效地确保 $ 是 jQuery 对象。这是唯一的一点 - 保证 jQuery 绑定(bind)到“$”还是有其他理由这样做？

Answer 1

您展示的这两个代码块在执行时间和执行原因方面存在显着差异。它们并不相互排斥。它们的用途不同。

JavaScript 模块

(function($) {
  // Backbone code in here
})(jQuery);

这是一个“JavaScript 模块”模式，通过立即调用函数实现。

• http://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript
• http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth

此代码的目的是为您的代码提供“模块化”、隐私和封装。

this 的实现是一个函数，它会立即被调用 (jQuery) 括号调用。将 jQuery 传递到括号中的目的是为全局变量提供局部作用域。这有助于减少查找 $ 变量的开销，并在某些情况下允许更好地压缩/优化压缩器。

立即调用函数会立即执行。一旦函数定义完成，函数就会被执行。

jQuery 的“DOMReady”函数

这是 jQuery 的“DOMReady”函数的别名:http://api.jquery.com/ready/

$(function(){
  // Backbone code in here
});

jQuery 的“DOMReady”函数在 DOM 准备好由您的 JavaScript 代码操作时执行。

主干代码中的模块与 DOMReady

在 jQuery 的 DOMReady 函数中定义 Backbone 代码是一种糟糕的形式，并且可能会损害您的应用程序性能。在 DOM 加载并准备好进行操作之前，不会调用此函数。这意味着在定义对象之前，您要等到浏览器至少解析了一次 DOM。

最好在 DOMReady 函数之外定义 Backbone 对象。我和许多其他人一样，更喜欢在 JavaScript 模块模式内执行此操作，这样我就可以为我的代码提供封装和隐私。我倾向于使用“揭示模块”模式(请参阅上面的第一个链接)来提供对模块外部所需位的访问。

通过在 DOMReady 函数之外定义您的对象，并提供一些引用它们的方法，您可以让浏览器抢先处理您的 JavaScript，从而有可能加快用户体验。它还使代码更加灵活，因为您可以四处移动事物，而不必担心在移动事物时创建更多 DOMREady 函数。

即使您在其他地方定义了 Backbone 对象，您仍然可能会使用 DOMReady 函数。原因是许多 Backbone 应用程序需要以某种方式操作 DOM。为此，您需要等到 DOM 准备就绪，因此您需要在定义应用程序后使用 DOMReady 函数启动您的应用程序。

您可以在网络上找到大量此类示例，但这是一个非常基本的实现，同时使用模块和 DOMReady 函数:

// Define "MyApp" as a revealing module

MyApp = (function(Backbone, $){

  var View = Backbone.View.extend({
    // do stuff here  
  });

  return {
    init: function(){
      var view = new View();
      $("#some-div").html(view.render().el);
    }
  };

})(Backbone, jQuery);



// Run "MyApp" in DOMReady

$(function(){
  MyApp.init();
});