jQuery的事件处理程序 - 内存使用

Question

我一直在做这样的：

$('#id').on('click',function(e){myFunction(var1,var2);}); 

function myFunction(x,y){blah blah blah} 

我想改变这样的：

$('#id').on('click',function(e){blah blah blah}); 

如果我这样做，有很多不同的DOM元素，我是否消耗更多的内存空间，因为我将myFunction占用的空间乘以每个闭包？或者它只是使用一个指针？

Answer 1

第一个代码具有重复使用的优点，但具有定义匿名函数仅用于调用实际函数的缺点。如果真的很重要，那么额外的功能是一个开销。

由于您只传递一个函数，第二个将占用更少的内存。函数也通过引用传递。这个函数的含义可以被存储一次，并被许多不同的调用者调用。

---

但是，您附加它的方式也会影响性能。如果你不喜欢这样写道：

$('#id1').on('click',function(e){myFunction(var1,var2);}); 
$('#id2').on('click',function(e){myFunction(var1,var2);}); 

这个人叫jQuery的4倍（2 $()和2 on()），造成2个匿名函数和两次调用外部函数。计数：6个调用，3个函数只是为了执行您的操作（不包括内部jQuery调用）。

$('#id1').on('click',function(e){blah blah blah}); 
$('#id2').on('click',function(e){blah blah blah}); 

，如果你做这种方式，功能不能重用了，但你有4调用了jQuery，2个功能，但你是重复的代码。从干燥的角度来看，这并不好。

$('#id1, #id2').on('click',function(e){blah blah blah}); 

这一个，你有2个电话，1个功能。这一个更好。

$('#id1, #id2').on('click',function(e){myFunction(var1,var2);}); 

你也可以这样做，该函数可以重复使用，牺牲一个额外的匿名函数和调用。计数：3个电话，2个功能。

---

你可以通过附加的处理程序，以“最接近公共父”驾驭.on力量，最近，这样的泡沫不会前往了很远。相比之下，live()将事件附加到document，从而使处理程序可用于新元素。但是附加到document对于深度嵌套元素来说非常有用。

$('nearest_common_parent').on('click','dynamic_element',function(){ 
    //do stuff 
}); 

Answer 2

我相信你的第二种方法按照惯例是正确的。特别是，由于与第一，你无法访问$(this)

你不得不在把它作为一个变种

$('#test').on('click', function(e) {myFunction($(this), e, other_vars)}); 

VS

$('test').on('click', function(e) { 
    e.preventDefault(); 
    var $this = $(this); 
    //yadda yadda 
}); 

这真的可以使您的代码更易读。我知道我没有回答实际问题，但我认为这些是正确编写你的职能的一些正当理由。

Answer 3

Joseph的答案在主要使用ID时是一个很好的解释。但是，如果您是选择器的类或标签名称，则最好使用on函数的selector参数。例如：

$('#page-wrap').on('hover', 'a', function() { 
    // do something 
    }); 

即只创建一个结合#page-wrap元件，但将在其内部的任何a元件烧制。它在内存使用和安装速度方面更好，特别是如果你绑定了很多元素。