Question

当我看到像这样的代码时，我总是心疼。

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

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

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

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

或代替id我有时会使用class names。虽然我还没有对此进行测试，但我强烈地知道第一种方法会出现性能问题，但我没有足够的理由要求某人不使用它，特别是当目标元素只是少。

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

Answer 1

我认为第一个例子没有理由比第二个例子有更糟糕的表现，事实上，在这方面它可能会更好。

你的第二个例子似乎缺少一些信息。也许你想用一个选择器来调用返回的函数，就像这样。

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

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

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

当然，选择所有项目而不仅仅选择一项会对性能产生影响，但如果你需要所有项目，为什么你只选择一项呢？

如果您正在讨论使用事件委派，那么绑定时可能会有一个很小的好处，但代表分析代码时会产生成本。

如果你在谈论一次一个地选择所有相同的元素，每个元素都有自己的ID，这可能比选择它们的成本更高，但这一切都取决于确切的情况。

Answer 2

第一种方法完全没问题。

是的，如果您在用户交互期间有动态附加复选框，那么您也可以将代码与正文绑定