您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

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

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

显示的两个代码块在执行时间和执行原因上有很大不同。它们不是彼此排斥的。它们的目的不同。

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

这是一个“ JavaScript模块”模式,通过立即调用功能实现。

代码的目的是为您的代码提供“模块化”,保密性和封装性。

功能的实现由调用(jQuery)括号立即调用。将jQuery传递到括号中的目的是为全局变量提供局部范围。这有助于减少查找$变量的开销,并在某些情况下允许优化器进行更好的压缩/优化。

立即调用功能会立即执行。功能定义一完成,功能即被执行。

jQuery的“ DOMReady”功能

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

当DOM准备由您的JavaScript代码操纵时,将执行jQuery的“ DOMReady”函数

模块中的模块与DOMReady

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

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

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

即使您在其他地方定义了Backbone对象,您仍然可能仍将使用DOMReady函数。原因是许多Backbone应用程序需要以某种方式操作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();
});
JS 2022/1/1 18:19:01 有344人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶