javascript - 是在 jQuery 中使用多个事件委托(delegate)还是在 on 中使用 if inside 更好？

Question

我正在开发一个基于 jquery 的新网站，我想知道哪个是关于性能的最佳选择:

选项 1:

$("body").on("click",".label-type1",function(){...});
$("body").on("click",".label-type2",function(){...});
....

选项 2:

$("body").on("click","label",function(){
     if($(this).hasClass("label-type1"){
        ...
     }else if($(this).hasClass("label-type2"){
        ...
     }});

提前谢谢你。

Answer 1

在这两个选项之间，您应该会发现性能差异可以忽略不计，因为两个处理程序都经过类似的过程来按您尝试定位的标签进行过滤。

查看事件和匹配选择器的 jQuery 源代码:

https://github.com/jquery/jquery/blob/master/src/event.js#L395

https://github.com/jquery/jquery/blob/2d4f53416e5f74fa98e0c1d66b6f3c285a12f0ce/src/selector-native.js#L143

以及原生matchesSelector()的相关性能测试:

https://jsperf.com/matchesselector-performance

当然，选项 1 将创建更多的事件处理程序，这意味着更多的内存使用。但这并不一定意味着它会影响性能，直到您大幅扩展。话虽这么说，选项 1 应该在小范围内表现得更好，因为它不会在处理程序中经历额外的 hasClass 条件。但如果您关心保持低内存占用，选项 2 会好得多，并且可能更容易组织，因为您可以创建一个辅助函数来在代码中的单独位置处理每种情况。