我正在浏览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绑定到'$',还是有其他原因?
5条答案
按热度按时间cpjpxq1n1#
您所展示的两个代码块在执行的时间和原因上有很大的不同。它们并不相互排斥。它们的用途并不相同。
JavaScript模块
这是一个“JavaScript模块”模式,用一个立即调用的函数实现。
此代码的目的是为您的代码提供“模块化”、隐私和封装。
它的实现是一个函数,调用方
(jQuery)
括号会立即调用该函数。将jQuery传入括号的目的是为全局变量提供局部作用域。这有助于减少查找$
变量的开销,并在某些情况下为小型化提供更好的压缩/优化。立即调用函数是立即执行的。函数定义一完成,函数就被执行。
jQuery的“DOMReady”函数
这是jQuery的“DOMReady”函数的别名:http://api.jquery.com/ready/
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函数:
w41d8nur2#
作为一个次要的旁注,将$作为参数发送给匿名函数会使$成为该函数的局部变量,如果经常调用$函数的话,这对性能会有一个小的积极影响。这是因为javascript首先在局部范围内搜索变量,然后向下遍历到窗口范围($通常在那里)。
2ledvvac3#
它确保您总是可以在闭包中使用
$
,即使使用了$.noConflict()
。如果没有这个闭包,你应该一直使用
jQuery
而不是$
。5t7ly7z54#
这是为了避免$变量的潜在冲突。如果其他东西定义了一个名为$的变量,你的插件可能会使用错误的定义
有关详细信息,请访问http://docs.jquery.com/Plugins/Authoring#Getting_Started
o75abkj45#
两者都要用。
自调用函数,您在其中传入jQuery以防止库冲突,并确保jQuery如您所期望的那样可用。
和.ready()快捷方式方法,以便仅在加载DOM后运行javascript: