選擇所有項目的Javascript性能含義

Question

當我看到這樣的代碼時，我總是感到難過

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

我通常更喜歡通過一個函數公開該功能，並讓其他開發人員使用目標元素調用該函數，如下所示。

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

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

或者我有時使用class names代替id 。 即使我仍要對此進行測試，我也很清楚第一種方法會出現性能問題，但是我沒有足夠的理由要求某人不要使用它，尤其是當目標元素很少時。

我想知道第一種/第二種方法真的不是一個好主意，為什么。

Answer 1

我不認為第一個示例的性能會比第二個示例差，並且實際上，在這方面可能稍好一點。

您的第二個示例似乎缺少一些信息。 也許您打算像這樣用選擇器調用返回的函數。

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

無論哪種方式，將其包裝在您首先執行的一個（或多個）函數中都不會帶來任何性能上的好處，並且可能會在執行時產生很小的成本。

---

如果您純粹是在談論在函數背后抽象行為的想法，那么應該有一個合理的限制。 我的意思是jQuery已經是相當龐大的抽象，因此將最小功能隱藏在另一個功能后面似乎是錯誤的做法。 .on()方法非常簡潔，處理程序已經在可以重用的命名函數中。

自然地，選擇所有項目與僅選擇一項會有性能上的影響，但是如果您需要全部，為什么只選擇一項呢？

如果您在談論使用事件委托，那么在綁定時可能會有一點好處，但是在委托分析代碼時會付出一定的代價。

如果您要談論一次選擇所有相同的元素，每個元素都有其自己的ID，那將比選擇全部元素花費更大，但這取決於具體情況。

Answer 2

第一種方法完全可以。

是的，如果您在用戶交互過程中動態添加了復選框，則還可以將代碼與主體綁定