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

【问题标题】：jQuery event handlers - memory usagejQuery 事件处理程序 - 内存使用
【发布时间】：2012-05-05 02:26:42
【问题描述】：

我一直在这样做：

$('#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 占用的空间与每个闭包相乘？还是只使用指针？

【问题讨论】：

该死的错字，我的意思是“如何”
@Joseph - 我明白了！ :) 它是由 AJAX 在创建新的 DOM 元素时完成的。特定类型（和类，就此而言）的每个元素都有在创建时附加的处理程序。我现在想知道是否可以将处理程序附加到该类，尽管我认为它需要在创建闭包的函数中存在特定于元素的变量。

【解决方案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 次函数，但你正在重复代码。从 DRY 的角度来看不好。

$('#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
});

【讨论】：

【解决方案2】：

我相信您的第二种方法按照惯例是正确的。特别是，因为第一次，您将无法访问$(this)

您必须将其作为 var 传递

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

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

它确实也使您的代码更具可读性。我知道我没有回答实际问题，但我认为这些是正确编写函数的一些正当理由。

【讨论】：

【解决方案3】：

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

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

这只会创建一个绑定到 #page-wrap 元素，但会在其中的任何 a 元素上触发。它在内存使用和设置速度方面更好，尤其是当您绑定到很多元素时。

【讨论】：