Question

我是服务器端开发人员，现在学习纯JS的绳索。这个问题是关于通过纯JS理解客户端缓存。

想象一个网页列出来自用户的各种推文。每条推文都有一个“响应此”按钮。按下它会显示一个文本框。

如果此文本框已经呈现，按“响应此”按钮只是将其关闭。负责创建此效果的JS函数称为toggle_reply。

每次加载页面时，我都会为每个“响应此”按钮指定切换功能，如下所示：

Array.from(document.querySelectorAll('button.reply')).forEach(btn => btn.onclick = toggle_reply)

每次刷新页面时都会调用此方法。每当有新的推文进入时页面都会刷新 - 将新的推文添加到列表中，如果列表大于40，则删除旧的推文。

我的问题是改进这种方法。对我来说，每次有一个新鲜的时候我都会循环运行这种感觉有点过分了。是否有办法为页面上存在的按钮缓存它并且已经由for循环处理？如何做到这一点的一个说明性例子将很棒。

Answer 1

这是事件委派有用的一个很好的例子。不要勾住每个按钮;相反，只需将click挂钩到它们所在的容器上，然后当点击气泡到容器时，检查它是否在冒泡时通过其中一个按钮：

document.getElementById("container").addEventListener("click", function(e) {
    // See if the click passed through `button.reply`
    var btn = e.target.closest("button.reply");
    if (btn) {
        // It's a reply button
        console.log("Reply to tweet");
    }
});

// Example of it working even when we add a new tweet
document.getElementById("container").insertAdjacentHTML("beforeend",
  `<div class="tweet">
    Four
    <button type="button" class="reply">Reply</button>
  </div>`
);

<div id="container">
  <div class="tweet">
    One
    <button type="button" class="reply">Reply</button>
  </div>
  <div class="tweet">
    Two
    <button type="button" class="reply">Reply</button>
  </div>
  <div class="tweet">
    Three
    <button type="button" class="reply">Reply</button>
  </div>
</div>

请参阅Element#closest here的文档;它是相对较新的，但可以是polyfilled。

使用事件委托来克服纯JS中的性能瓶颈

1 个答案: