Erstellen wir einen leichtgewichtigen nativen Event-Bus in JavaScript

Für eine Browser-Rendering-Engine sind HTML-Kommentare nur Notizen im Code, die keine Funktionalität haben, abgesehen von beschreibendem Text für Entwickler. Aber da Kommentare immer noch in HTML geschrieben sind, landen sie im DOM als echte Knoten und haben ihre eigene Prototyp-Schnittstelle – Comment – die von Node erbt.

Die Comment-Klasse kann mit new direkt erstellt werden, so wie EventTarget auch

const myEventBus = new Comment('my-event-bus');

Wir könnten auch die alte, aber weit verbreitete API document.createComment verwenden. Sie erfordert einen data-Parameter, der den Inhalt des Kommentars darstellt. Er kann sogar ein leerer String sein.

const myEventBus = document.createComment('my-event-bus');

Jetzt können wir Ereignisse mit dispatchEvent auslösen, was ein Event-Objekt akzeptiert. Um benutzerdefinierte Ereignisdaten zu übergeben, verwenden Sie CustomEvent, wobei das detail-Feld verwendet werden kann, um beliebige Daten zu enthalten.

myEventBus.dispatchEvent(
  new CustomEvent('event-name', { 
    detail: 'event-data'
  })
);

Internet Explorer 9-11 unterstützt CustomEvent, aber keine der Versionen unterstützt new CustomEvent. Es ist komplex, es mit document.createEvent zu simulieren. Wenn IE-Unterstützung für Sie wichtig ist, gibt es eine Möglichkeit, ein Polyfill dafür zu erstellen.

Jetzt können wir Ereignis-Listener binden

myEventBus.addEventListener('event-name', ({ detail }) => {
  console.log(detail); // => event-data
});

Wenn ein Ereignis nur einmal ausgelöst werden soll, können wir { once: true } für die einmalige Bindung verwenden. Andere Optionen passen hier nicht. Um Ereignis-Listener zu entfernen, können wir das native removeEventListener verwenden.

Debugging

Die Anzahl der an einen einzigen Event-Bus gebundenen Ereignisse kann riesig sein. Es kann auch zu Speicherlecks kommen, wenn Sie vergessen, sie zu entfernen. Was ist, wenn wir wissen wollen, *wie viele* Ereignisse an myEventBus gebunden sind?

myEventBus ist ein DOM-Knoten, sodass er von den DevTools im Browser inspiziert werden kann. Von dort aus können wir die Ereignisse im Reiter Elemente → Ereignis-Listener finden. Stellen Sie sicher, dass Sie "Vorfahren" abwählen, um Ereignisse auszublenden, die an document und window gebunden sind.

Ein Beispiel

Ein Nachteil ist, dass die Syntax von EventTarget etwas umständlich ist. Wir können einen einfachen Wrapper dafür schreiben. Hier ist ein Demo in TypeScript unten

class EventBus<DetailType = any> {
  private eventTarget: EventTarget;
  constructor(description = '') { this.eventTarget = document.appendChild(document.createComment(description)); }
  on(type: string, listener: (event: CustomEvent<DetailType>) => void) { this.eventTarget.addEventListener(type, listener); }
  once(type: string, listener: (event: CustomEvent<DetailType>) => void) { this.eventTarget.addEventListener(type, listener, { once: true }); }
  off(type: string, listener: (event: CustomEvent<DetailType>) => void) { this.eventTarget.removeEventListener(type, listener); }
  emit(type: string, detail?: DetailType) { return this.eventTarget.dispatchEvent(new CustomEvent(type, { detail })); }
}
    
// Usage
const myEventBus = new EventBus<string>('my-event-bus');
myEventBus.on('event-name', ({ detail }) => {
  console.log(detail);
});

myEventBus.once('event-name', ({ detail }) => {
  console.log(detail);
});

myEventBus.emit('event-name', 'Hello'); // => Hello Hello
myEventBus.emit('event-name', 'World'); // => World

Die folgende Demo liefert das kompilierte JavaScript.

Und da haben wir es! Wir haben gerade einen abhängigkeitsfreien ereignislauschenden Bus erstellt, bei dem eine Komponente eine andere Komponente über Änderungen informieren kann, um eine Aktion auszulösen. Es braucht keine vollständige Bibliothek für solche Dinge, und die Möglichkeiten, die sich dadurch eröffnen, sind schier endlos.