我是服务器端开发人员,现在学习纯JS的绳索。这个问题是关于通过纯JS理解客户端缓存。
想象一个网页列出来自用户的各种推文。每条推文都有一个“响应此”按钮。按下它会显示一个文本框。
如果此文本框已经呈现,按“响应此”按钮只是将其关闭。负责创建此效果的JS函数称为toggle_reply
。
每次加载页面时,我都会为每个“响应此”按钮指定切换功能,如下所示:
Array.from(document.querySelectorAll('button.reply')).forEach(btn => btn.onclick = toggle_reply)
每次刷新页面时都会调用此方法。每当有新的推文进入时页面都会刷新 - 将新的推文添加到列表中,如果列表大于40,则删除旧的推文。
我的问题是改进这种方法。对我来说,每次有一个新鲜的时候我都会循环运行这种感觉有点过分了。是否有办法为页面上存在的按钮缓存它并且已经由for循环处理?如何做到这一点的一个说明性例子将很棒。
答案 0 :(得分:2)
这是事件委派有用的一个很好的例子。不要勾住每个按钮;相反,只需将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。