Javascript 为什么要定义一个匿名函数并将其作为参数传递给jQuery?
我正在浏览backbone.js屏幕广播中优秀的peepcode演示代码。其中,主干代码都包含在传递jQuery对象的匿名函数中:Javascript 为什么要定义一个匿名函数并将其作为参数传递给jQuery?,javascript,jquery,backbone.js,Javascript,Jquery,Backbone.js,我正在浏览backbone.js屏幕广播中优秀的peepcode演示代码。其中,主干代码都包含在传递jQuery对象的匿名函数中: (function($) { // Backbone code in here })(jQuery); 在我自己的主干代码中,我刚刚将所有代码包装在jQuery DOM“ready”事件中: $(function(){ // Backbone code in here }); 第一种方法的要点/优点是什么?这样做会创建一个匿名函数,然后立即执行该函数,并
(function($) {
// Backbone code in here
})(jQuery);
在我自己的主干代码中,我刚刚将所有代码包装在jQuery DOM“ready”事件中:
$(function(){
// Backbone code in here
});
第一种方法的要点/优点是什么?这样做会创建一个匿名函数,然后立即执行该函数,并将jQuery对象作为函数参数传递,从而有效地确保$是jQuery对象。这是保证jQuery绑定到“$”的唯一一点,还是有其他理由这样做?这是为了避免$variable的潜在冲突。 如果有其他东西定义了一个名为$的变量,那么您的插件可能使用了错误的定义
有关更多详细信息,请参阅,它确保您可以始终在该闭包内使用
$
,即使已使用
如果没有这个闭包,您应该一直使用
jQuery
而不是$
。您显示的两个代码块在执行时间和执行原因上有很大的不同。它们并不是相互排斥的。它们的作用不同
JavaScript模块
这是一个“JavaScript模块”模式,通过立即调用函数实现
(jQuery)
括号立即调用。将jQuery传入括号的目的是为全局变量提供局部作用域。这有助于减少查找$
变量的开销,并在某些情况下允许更好地压缩/优化小型化程序
立即调用的函数会立即执行。函数定义完成后,函数即被执行
jQuery的“DOMReady”函数
这是jQuery“DOMReady”函数的别名:
jQuery的“DOMReady”函数在DOM准备好被JavaScript代码操纵时执行
主干代码中的模块与DOMReady
在jQuery的DOMReady函数中定义主干代码是一种糟糕的形式,可能会损害应用程序的性能。在加载DOM并准备好进行操作之前,不会调用此函数。这意味着在定义对象之前,您要等待浏览器至少解析一次DOM
最好在DOMReady函数之外定义主干对象。一、 在许多其他方法中,我更喜欢在JavaScript模块模式中这样做,以便为代码提供封装和隐私。我倾向于使用“显示模块”模式(参见上面的第一个链接)来提供对模块外部所需位的访问
通过在DOMReady函数之外定义对象,并提供引用它们的方法,您可以让浏览器在处理JavaScript时抢先一步,从而潜在地加快用户体验。它还使代码更加灵活,因为您可以移动对象,而不必担心在移动对象时创建更多的DOMREady函数
即使在其他地方定义主干对象,您仍然可能会使用DOMReady函数。原因是许多主干应用程序需要以某种方式操纵DOM。要做到这一点,需要等待DOM准备就绪,因此需要在定义应用程序后使用DOMReady函数启动应用程序
您可以在web上找到很多这样的示例,但这里有一个非常基本的实现,使用模块和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();
});
作为一个次要的旁注,将$作为参数发送到匿名函数会使$成为该函数的局部变量,如果经常调用$函数,则会对性能产生小的积极影响。这是因为javascript首先在局部范围内搜索变量,然后一直向下遍历到窗口范围(通常是$所在的地方)。两者都使用 您在其中传递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);
与其他库的互操作性-如果页面作者需要使用,第一个示例仍然有效。可能的重复:请参阅可能的重复以了解不同之处。有关此详细响应,请参阅可能的重复。我只知道DOMReady函数是在DOMReady事件触发时调用的,但我从未想过这会是一个问题。将代码拆分为定义模块内的主干位,然后在dom ready中与它们交互确实看起来是最好的方法,即“todo”带有主干src的示例应用程序将所有内容都放在dom就绪中。别忘了javascript模块模式也称为
IIFE
。匿名函数基本上与dom就绪同时执行,那么它如何使它们更高效呢?我在其他地方找到的一个较短版本(也保护未定义):jQuery(函数($,未定义){/*Code*/});
// 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(); });
(function($) { $(function(){ //add code here that needs to wait for page to be loaded }); //and rest of code here })(jQuery);