对许多元素使用 bind() 方法是一种不好的做法吗?

Is it a bad practice to use the bind() method for many elements?

假设我的页面中有很多弹出窗口(比如超过 30 个),我需要让它们监听点击事件处理程序。以下是 jQuery 语法中的示例 1:

$('.popup').on('click', function () {
    // do something
});

我过去了解到一个建议,即示例 1 方法对 performance/memory 不利(我不记得确切原因),因为每个元素都监听一个独立的匿名函数。并且建议说最好给事件处理程序命名,然后让所有元素监听命名的事件处理程序,就像下面的例子2:

function clickEventHandler() {
    // do something
}

$('.popup').on('click', clickEventHandler);

现在,对于每个弹出窗口,我需要将特定于该弹出窗口的变量传递到指定的事件处理程序中。我想到的方法是使用 .bind() 方法,如以下示例 3:

function clickEventHandler(someInfo) {
    // do something
}

$('.popup').each(function () {
    $(this).on('click', clickEventHandler.bind(null, $(this).attr('data-some-info')));  
});

但是,令我担心的是 .bind() 方法的描述说:

The bind() method creates a new function...

我的问题是:“创建新函数”到底是什么意思?是不是每次使用该方法都创建一个独立的匿名函数,当涉及到performance/memory时,就像示例1一样糟糕?

方法 1 很好 - 您只创建一个函数,并将其传递给每个事件处理程序。

现在,如果你有类似的东西

$('.popup').each(function() {
  $(this).on('click', function () {
    // do something
  });
});

确实有点浪费,因为你会为循环中的每次迭代创建一个新的回调函数。

但是

Assuming there are many popups (like more than 30) in my page

30 对于现代硬件来说绝对算不了什么。现在,如果你有一千,或者一万,那么可能会有一些事情要考虑,也许吧。

My question is: What does "creates a new function" mean exactly? Does it mean creating an independent anonymous function every time the method is used and is as bad as Example 1 when it comes to performance/memory?

示例 1 很好 - 但在循环中调用 .bind 有点类似于我上面的代码片段,其中在内存中有许多单独的函数。

实现你想要的:

  1. 使用事件委托(可选 - 这样您只需将一个侦听器附加到父级,而不是 倾听每一个元素)
  2. 检查处理程序内部而不是外部的属性
function handleClick(e) {
    const someInfo = this.dataset.someInfo;
    // rest of function
}

$(document.body).on('click', '.popup', handleClick);