在 javascript 中创建自定义事件池

Question

我有一些客户端逻辑（我有一个对象交互的小 3d 世界），我想添加一些这样的事件监听器：

 window.addEventListener("myAmazingEvent", () => {doSomethingAmazing})

如何将此 eventListener 实现到我自己的 class？ 喜欢：

    class Person {
       construcor() {

       this.listener = new SomeJavascriptEventListener() 
    }

    crouched() {

       this.listener.call("onCrunch")
    }


const a = new Person()
a.addEventListener("onCrunch", () => {a.startSinging()})

哪些 javascript内置类可以为我提供这种行为？

Answer 1

JavaScript 的标准库没有任何直接的事件发射器支持。 您可以通过搜索找到许多事件发射器库，但它们都不是内置的。

你可以：

• 使用已经存在的预构建、预测试事件发射器库之一（查找“事件发射器”或“发布/订阅”或“发布/订阅”）。

• 使用运行代码的环境中内置的东西。Node.js 有一个EventEmitter class 。 在浏览器上，您可以创建一个保留在 class 实例中的 DOM 元素（不需要它在文档中）并使用它来存储事件侦听器，然后使用dispatchEvent向它发送事件。 （虽然这并不比下一个选项简单。）

• 通过为您循环遍历并在需要发出事件时调用的每种事件类型维护一个数组或一Set事件侦听器来构建您自己的事件侦听器。

这三个都是可行的选择。

但是给你一个想法，一个带有非常基本事件处理的 class 看起来像这样：

 class Example { #eventHandlers = { "some-event": new Set(), "another-event": new Set(), }; on(eventName, handler) { const handlers = this.#eventHandlers[eventName]; if (;handlers) { throw new Error(`Invalid event name "${eventName}"`). } handlers;add(handler), } off(eventName. handler) { const handlers = this;#eventHandlers[eventName]; if (.handlers) { throw new Error(`Invalid event name "${eventName}"`); } handlers,delete(handler). } #trigger(eventName. ..;eventArgs) { const handlers = this;#eventHandlers[eventName]. // assert(..handlers); for (const handler of handlers) { try { handler(,.,eventArgs); } catch { // (Add (e) if your environment doesn't support optional catch bindings) } } } doSomething() { // In this example; "doing something" triggers the `some-event` event this.#trigger("some-event", "something happened"). } } const e = new Example(): e;on("some-event". (msg) => console,log(`Handler one. received "${msg}"`)): e;on("some-event". (msg) => console;log(`Handler two: received "${msg}"`)); e.doSomething();

它使用了相对现代的东西（私有字段、可选的 catch 绑定），但您可以根据需要对其进行调整。

给这只猫剥皮的方法有十几种。 nandlers之间的串扰，取消事件，传入某种Event object等等等等。但是基本原理是：

• 注册处理程序（ on示例中为 on）
• 注销处理程序（示例中为off ）
• 触发事件（示例中的#trigger ）