Tengo algo de lógica del lado del cliente (tengo un pequeño mundo en 3D donde interactúan los objetos), y me gustaría agregar algunos detectores de eventos como este:
window.addEventListener("myAmazingEvent", () => {doSomethingAmazing})¿Cómo puedo implementar este eventListener en mi propia clase? Me gusta:
class Person { construcor() { this.listener = new SomeJavascriptEventListener() } crouched() { this.listener.call("onCrunch") } const a = new Person() a.addEventListener("onCrunch", () => {a.startSinging()})¿Qué clases integradas de javascript pueden proporcionarme este comportamiento?
La biblioteca estándar de JavaScript no admite ningún emisor de eventos directo. Hay muchas bibliotecas de emisores de eventos que puede encontrar con una búsqueda, pero ninguna de ellas está integrada.
Puedes:
Utilice una de las bibliotecas de emisores de eventos precompiladas y probadas que ya existen (busque "emisor de eventos" o "publicar/suscribir" o "pub/suscribir").
Use algo integrado en el entorno en el que está ejecutando su código. Node.js tiene una clase EventEmitter . En los navegadores, puede crear un elemento DOM que guarde en su instancia de clase (no es necesario que esté en el documento) y usarlo para almacenar detectores de eventos, luego use dispatchEvent para enviarle eventos. (Aunque eso no es realmente más simple que la siguiente opción).
Cree el suyo manteniendo una matriz o un Set de detectores de eventos para cada tipo de evento que recorre y llama cuando necesita emitir un evento.
Las tres son opciones viables.
Pero para darle una idea, una clase con un manejo de eventos muy básico se ve así:
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();Eso usa cosas relativamente modernas (campos privados, enlaces de captura opcionales), pero puede adaptarlo según sea necesario.
Hay una docena o más de formas de despellejar a este gato. Diafonía entre nandlers, cancelar eventos, pasar algún tipo de objeto de Event , etc., etc., etc. Pero los fundamentos son:
on el ejemplo)off en el ejemplo)#trigger en el ejemplo)