backbone.js 为什么要定义一个匿名函数并将它作为参数传递给jQuery呢?

slhcrj9b  于 2022-11-10  发布在  jQuery
关注(0)|答案(5)|浏览(192)

我正在浏览backbone.js截屏视频中的优秀peepcode演示代码。在其中, Backbone.js 代码都包含在一个匿名函数中,该函数传递给jQuery对象:

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

在我自己的 Backbone.js 代码中,我已经将所有代码封装在jQuery DOM 'ready'事件中:

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

第一种方法的优点是什么?这样做会创建一个匿名函数,然后立即执行该匿名函数,并将jQuery对象作为函数参数传递,从而有效地确保$是jQuery对象。这是唯一的一点吗?确保jQuery绑定到'$',还是有其他原因?

cpjpxq1n

cpjpxq1n1#

您所展示的两个代码块在执行的时间和原因上有很大的不同。它们并不相互排斥。它们的用途并不相同。

JavaScript模块

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

这是一个“JavaScript模块”模式,用一个立即调用的函数实现。

此代码的目的是为您的代码提供“模块化”、隐私和封装。
它的实现是一个函数,调用方(jQuery)括号会立即调用该函数。将jQuery传入括号的目的是为全局变量提供局部作用域。这有助于减少查找$变量的开销,并在某些情况下为小型化提供更好的压缩/优化。
立即调用函数是立即执行的。函数定义一完成,函数就被执行。

jQuery的“DOMReady”函数

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

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

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

模块与 Backbone 代码中的DOMReady

在jQuery的DOMReady函数中定义 Backbone.js 代码是一种不好的方式,可能会损害应用程序的性能。在DOM加载并准备好进行操作之前,不会调用该函数。这意味着在定义对象之前,您需要等待浏览器至少解析一次DOM。
在DOMReady函数之外定义Backbone对象是一个更好的主意。我和其他很多人一样,更喜欢在JavaScript Module模式中定义Backbone对象,这样我就可以为我的代码提供封装和隐私。我倾向于使用“Revealing Module”模式(见上面的第一个链接)来提供对我需要的模块之外的位的访问。
通过在DOMReady函数之外定义对象,并提供引用它们的方法,浏览器就可以在处理JavaScript时领先一步,从而潜在地加快用户体验。这也使得代码更加灵活,因为你可以移动对象,而不必担心在移动对象时创建更多的DOMReady函数。
即使你在其他地方定义了你的Backbone对象,你仍然可能会使用DOMReady函数。原因是很多Backbone应用程序需要以某种方式操作DOM。为此,你需要等到DOM准备好,因此你需要在定义好DOM之后使用DOMReady函数来启动你的应用程序。
您可以在网络上找到大量这样的例子,但这里有一个非常基本的实现,同时使用Module和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();
});
w41d8nur

w41d8nur2#

作为一个次要的旁注,将$作为参数发送给匿名函数会使$成为该函数的局部变量,如果经常调用$函数的话,这对性能会有一个小的积极影响。这是因为javascript首先在局部范围内搜索变量,然后向下遍历到窗口范围($通常在那里)。

2ledvvac

2ledvvac3#

它确保您总是可以在闭包中使用$,即使使用了$.noConflict()
如果没有这个闭包,你应该一直使用jQuery而不是$

5t7ly7z5

5t7ly7z54#

这是为了避免$变量的潜在冲突。如果其他东西定义了一个名为$的变量,你的插件可能会使用错误的定义
有关详细信息,请访问http://docs.jquery.com/Plugins/Authoring#Getting_Started

o75abkj4

o75abkj45#

两者都要用。
自调用函数,您在其中传入jQuery以防止库冲突,并确保jQuery如您所期望的那样可用。
和.ready()快捷方式方法,以便仅在加载DOM后运行javascript:

(function($) {
    $(function(){
          //add code here that needs to wait for page to be loaded
    });

    //and rest of code here
})(jQuery);

相关问题