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

当我看到这样的代码时，我总是感觉很糟糕

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

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

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

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

或者我有时使用

类名来代替
id
。尽管我还没有测试过这一点，但我非常清楚第一种方法会出现性能问题，但我没有足够的理由要求别人不要使用它，尤其是在目标元素很少的情况下

我想知道第一种/第二种方法是否真的是个坏主意，以及原因。
我看不出第一种方法的性能比第二种方法差的原因，事实上，在这方面，它可能稍微好一点

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

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

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


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

当然，选择所有项目与只选择一个项目会对性能产生影响，但是如果您需要所有项目，为什么只选择一个

如果您正在谈论使用事件委托，那么绑定时可能会有一点好处，但委托分析代码时会有成本

如果你说的是一次选择一个相同的元素，每个元素都有自己的ID，这可能比选择所有元素的成本更高，但这完全取决于具体情况。
第一种方法完全可以

是的，如果您在用户交互过程中动态附加了复选框，那么您也可以将代码绑定到body上
这确实是一个需要解决的问题。在那里创建一个，我很乐意给出一些反馈。如果你真的想在所有复选框上挂起事件，那么第一个例子没有错。第二个例子，恕我直言，没有任何意义——无法调用该函数。但是使用
id
通常不是一个好主意，只是FWIW。（当然，这段代码不是真的，它只是使用了一个选择器。）尝试使用，你可以自己找到它。@t.J.Crowder我更新了，看看它现在是否让senseI看不到第二种方法的任何真正优势，不。包装器没有增加任何价值，并且消除了灵活性。