2

我一直在这样做：

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

4

3 回答 3

2

第一个代码具有重用的优点，但缺点是定义一个匿名函数只是为了调用真正的函数。如果它真的很重要，那么额外的功能就是开销。

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

但是，您连接它的方式也会影响性能。如果你这样做：

$('#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
});
于 2012-05-05T02:36:01.770 回答
1

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

您必须将其作为 var 传递

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

VS

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

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

于 2012-05-05T02:36:28.663 回答
1

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

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

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

于 2012-05-05T02:50:29.370 回答