英文:
Preventing duplicate listeners on a page
问题
如果有几个人在同一个页面上工作，防止重复监听器的一个好方法是创建一个针对每个页面的“主”JS文件，该文件将公开所需的监听器，然后需要使用它们的人将使用这些监听器，而不是创建重复的监听器。
这很可能只关系到一些全局目标，比如 window 或 document，而不关心那些由非常特定的选择器设置的特定监听器。
例如，如果我需要在窗口上创建一个 focus 事件监听器，我会这样做：
// myScript.js
window.addEventListener("focus", (event) => {
// 这里是一些代码
});
但是另一个开发人员也可以创建自己的脚本并在该页面上添加自己的监听器：
// otherScript.js
window.addEventListener("focus", (event) => {
// 这里是一些代码
});
防止这些重复和避免冲突的一个好方法是将这些全局监听器（window、document 等）存储在主JS文件中，然后将监听器处理程序保存在一个变量中，然后可以重复使用，类似于：
let globalWindowFocusListener = window.addEventListener("focus", (event) => { ...
（我不确定语法是否正确或是否可行，只是提出了一个一般性的想法）
或者还有其他方法吗？
英文:
If a few people work on the same page, what is a good way to prevent duplicate listeners? I was thinking to create a "master" JS file for each page which will expose the needed listeners, then whoever need to use that will use these instead of creating a duplicate listener.
This is most likely only matters for some global targets like window or document and not the specific listeners that are set by very specific selectors.
For example, if I need a focus event listener on the window, I create:
// myScript.js
window.addEventListener("focus", (event) => {
// some code here
});
But another dev can also create his own script and add his own listener on that page:
// otherScript.js
window.addEventListener("focus", (event) => {
// some code here
});
What is a good way to prevent these duplicates and avoid collisions? I was thinking maybe it's possible to store those global listeners (window, document, etc..) in a master JS file and save the listener handler on a variable and then it can be reused?
Something like:
let globalWindowFocusListener = window.addEventListener("focus", (event) => { ...
(I am not sure about the syntax or if that's possible, just wrote a general idea)
Or that's not correct and there are other ways to do it?
答案1
得分: 2
以下是您要翻译的内容：
不应该存在为同一事件拥有两个处理程序的问题；当事件触发时，它们将依次被调用。
const button = document.getElementById("x");
const textarea = document.getElementById("y");
// 脚本 1
button.addEventListener("click", () => textarea.value += "叮！\n");
// 脚本 2
button.addEventListener("click", () => textarea.value += "咚！\n");
textarea.addEventListener("focus", () => textarea.value += "哦，那真刺激！\n");
<button id="x">点我！</button>
<br>
<textarea id="y" rows=10 cols=30 readonly></textarea>
希望这对您有所帮助。
英文:
There shouldn't be a problem with having two handlers for the same event; they'll be called one after the other when the event fires.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const button = document.getElementById("x");
const textarea = document.getElementById("y");
// Script 1
button.addEventListener("click", () => textarea.value += "Ding!\n");
// Script 2
button.addEventListener("click", () => textarea.value += "Dong!\n");
textarea.addEventListener("focus", () => textarea.value += "Ooh, that tickles!\n");
<!-- language: lang-html -->
<button id="x">Click me!</button>
<br>
<textarea id="y" rows=10 cols=30 readonly></textarea>
<!-- end snippet -->
答案2
得分: -5
多个监听器会浪费资源并降低页面速度。
是否曾经想过为什么YouTube、Reddit等许多过于热衷的网站速度如此缓慢且令人沮丧？
它们有太多元素和太多监听器浪费内存并占用处理器！
它们是如何编写代码的反面示例，我不在乎它们有多受欢迎，因为它们仍然写得很糟糕。
您可以创建一个名为 Listen.js 的单独文件，其中包含所有的监听器，以便任何人都可以快速查看已存在的内容，然后您可以像这样在您的 .htm 页面中轻松链接到它...
<script src="Listen.js"></script>
英文:
Indeed, multiple listeners waste resources and slow the page down.
Ever wonder why YouTube, Reddit; and many other overzealous websites, are so slow and frustrating?
They have too many elements and too many listeners wasting memory and preoccupying the processor!
They’re great examples of how NOT to code, and I don’t care how popular they may be because they’re still badly written.
What you can do is create a separate Listen.js file that holds all the listeners so that anyone can quickly look through and see what already exists, which you can easily link to in your .htm pages like this...
<script src="Listen.js"></script>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论