选择所有项目对 Javascript 性能的影响

Question

看到这样的代码总感觉很糟糕

$('input[type=checkbox]').on('click', doSomething);

我通常更喜欢通过函数公开功能，并让其他开发人员使用目标元素调用该函数，如下所示。

var onClick = (function ($) { return function ({ id }) {
   $(id).on('click', doSomething);
} })(jQuery);

onClick({id: '#some-element'})

或者有时我使用类名来代替id。尽管我还没有对此进行大量测试，但我强烈知道第一种方法会存在性能问题，但我没有足够的理由要求某人不要使用它，特别是当目标元素很少时。

我想知道第一种/第二种方法是否真的是一个坏主意以及为什么。

Answer 1

我看不出为什么第一个示例的性能会比第二个示例差，事实上，在这方面它可能稍微好一些。

你的第二个例子似乎缺少一些信息。也许您打算使用选择器调用返回的函数，如下所示。

(function ($) { return function ({ id }) {
   $(id).on('click', doSomething);
} })(jQuery)({id: 'input[type=checkbox]'});

无论哪种方式，将其包装在您首先执行的一个(或多个)函数中都不会带来任何性能优势，并且可能会在执行时产生微小的成本。

<小时/>

如果您纯粹谈论函数背后的抽象行为的想法，那么应该有一个合理的限制。我的意思是 jQuery 已经是一个相当庞大的抽象，因此将最小的功能隐藏在另一个函数后面似乎是错误的。 .on() 方法足够简洁，并且处理程序已经位于可以重用的命名函数中。

选择所有项目与仅选择一项相比，自然会对性能产生影响，但如果您需要全部项目，为什么只选择一项？

如果您正在谈论使用事件委托(delegate)，那么绑定(bind)时可能会带来一点好处，但在委托(delegate)分析代码时会产生成本。

如果您正在谈论一次选择所有相同的元素，每个元素都有自己的 ID，那么这可能比选择所有元素的成本更高，但这完全取决于具体情况。