Erstellen wir einen leichten nativen Eventbus in JavaScript

Eventbus ist ein Designmuster (obwohl wir hier JavaScript diskutieren, es ist ein Designmuster in jeder Sprache), mit dem die Kommunikation zwischen verschiedenen Komponenten vereinfacht werden kann. Es kann auch als Veröffentlichung/Abonnement oder PubSub angesehen werden.

Die Idee ist, dass Komponenten den Eventbus anhören können, um zu verstehen, wann ihre Operationen ausgeführt werden. Beispielsweise kann die Registerkarte Panel -Komponente auf Ereignisse anhören, die angeben, dass sie die aktive Registerkarte ändert. Dies kann natürlich durch Klicken auf eine der Registerkarten verursacht werden, sodass es vollständig in dieser Komponente behandelt wird. Mit dem Eventbus können einige andere Elemente jedoch angeben, dass die Registerkarte Änderungen vornehmen soll. Stellen Sie sich einen Fehler vor, bei dem der Benutzer eine Benachrichtigung in einer bestimmten Registerkarte erhalten lässt. Das Formular sendet daher eine Nachricht an den Ereignisbus, wobei die Registerkarte Komponente angewiesen wird, die aktive Registerkarte auf eine Registerkarte zu ändern, die den Fehler enthält. So sieht es im Eventbus aus.

Der Pseudo-Code für diesen Fall lautet wie folgt…

 // Registerkartenkomponenten Tabs.Changetab = id => {
  // Ändern Sie den DOM -Betrieb der aktiven Registerkarte.
};
Myeventbus.subscribe ("Change-tab", Tabs.Changetab (id));

// andere Komponenten ...
// etwas passiert und dann:
Myeventbus.publish ("Change-tab", 2);

Benötigen Sie eine JavaScript -Bibliothek, um dies zu implementieren? (Tippfrage: Sie benötigen nie eine JavaScript -Bibliothek). Nun, es gibt viele Optionen:

• Pubsubjs
• Eventemitter3
• Postal.js
• JQuery unterstützt sogar benutzerdefinierte Ereignisse, was für dieses Muster von großer Bedeutung ist.

Schauen Sie sich auch Mitt, eine Bibliothek mit nur 200 Bytes GZIP an. Dieses einfache Muster inspirierte die Menschen, es auf eine Weise alleine zu lösen, die so präzise wie möglich war.

Lass es uns selbst machen! Wir verwenden überhaupt keine Bibliotheken von Drittanbietern, sondern nutzen das Event-Hörsystem, das bereits in JavaScript integriert ist, addEventListener mit dem wir alle vertraut sind und mit dem wir alle lieben.

Erstens ein Kontext

Die addEventListener -API in JavaScript ist eine Mitgliedsfunktion EventTarget -Klasse. Der Grund, warum wir das Klickereignis an die Schaltfläche binden können, ist, dass die Prototypenschnittstelle von ( HTMLButtonElement ) indirekt von EventTarget geerbt wird.

Im Gegensatz zu den meisten anderen DOM -Schnittstellen können Sie das new Schlüsselwort verwenden, um EventTarget direkt zu erstellen. Es wird in allen modernen Browsern unterstützt, aber erst vor kurzem. Wie wir im obigen Screenshot sehen können, erbt Node EventTarget , sodass alle DOM -Knoten addEventListener mit Methode haben.

Tipps

Ich empfehle, einen extrem leichten Knotentyp als Event-Hörbus zu verwenden: HTML-Kommentare ( <!-- --> ).

Für Browser -Rendering -Engines sind HTML -Kommentare nur Kommentare im Code und haben keine andere Funktionen, als den Entwicklern deskriptiven Textes zu liefern. Da jedoch noch Kommentare in HTML geschrieben sind, erscheinen sie im DOM als echte Knoten und haben eine eigene Prototyp -Schnittstelle - Comment -, die vom Node erbt.

Die Comment kann direkt aus new erstellt werden, genau wie EventTarget :

 const myeventbus = neuer Kommentar ('my-event-bus');

Wir können auch das alte, aber weithin unterstützte document.createComment verwenden. Createcomment API. Es erfordert einen Datenparameter, d. H. Der Inhalt des Kommentars. Es kann sogar eine leere Zeichenfolge sein:

 const myeventbus = document.createcomment ('my-event-bus');

Jetzt können wir dispatchEvent verwenden, um ein Ereignis auszustellen, das ein Event akzeptiert. Verwenden Sie CustomEvent , wobei das detail -Feld für Daten verwendet werden kann, um Daten enthalten zu können, um Daten enthalten zu haben.

 myeventbus.dispatchEvent (
  Neue CustomEvent ('Event-name', {
    Detail: 'Event-Data'
  })
);

Internet Explorer 9-11 unterstützt CustomEvent , aber keine Version unterstützt new CustomEvent . Verwenden Sie document.createEvent , um es zu simulieren, dass es komplex ist. Wenn IE -Unterstützung für Sie wichtig ist, gibt es eine Möglichkeit, es zu bevölkern.

Jetzt können wir den Event -Hörer binden:

 myeventbus.addeventListener ('event-name', ({detail}) => {
  console.log (detail); // => Ereignisdaten
});

Wenn das Ereignis nur einmal abfeuern soll, können wir { once: true } für einmalige Bindung verwenden. Andere Optionen sind hier nicht geeignet. Um den Ereignishörer zu entfernen, können wir den nativen removeEventListener verwenden.

debuggen

Die Anzahl der an einen einzelnen Ereignisbus gebundenen Ereignisse kann sehr groß sein. Wenn Sie vergessen, sie zu löschen, kann es auch ein Speicherleck geben. Was ist, wenn wir wissen wollen, wie viele Ereignisse an myEventBus gebunden sind?

myEventBus ist ein DOM -Knoten, daher können Devtools im Browser ihn überprüfen. Dort finden wir das Ereignis in der Registerkarte Elemente → Event Listener. Stellen Sie sicher, dass Sie "Vorfahren" deaktivieren, um Ereignisse zu verbergen, die an document und window gebunden sind.

Beispiel

Ein Nachteil ist, dass die Syntax von EventTarget leicht ausführlich ist. Wir können einen einfachen Wrapper dafür schreiben. Hier finden Sie eine Demonstration in TypeScript:

 Klasse Eventbus<detailtype any> {
  Private EventTarget: EventTarget;
  constructor (Beschreibung = '') {this.eventTarget = document.AppendChild (document.Createcomment (Beschreibung)); }
  on (Typ: String, Hörer: (Ereignis: CustOMEvent<detailtype> ) => void) {this.eventTarget.adDeVentListener (Typ, Listener); }
  Einmal (Typ: String, Hörer: (Ereignis: CustOMEvent<detailtype> ) => void) {this.eventTarget.adDeVentListener (Typ, Hörer, {einmal: true}); }
  Aus (Typ: String, Hörer: (Ereignis: CustOMEvent<detailtype> ) => void) {this.eventTarget.removeEventListener (Typ, Listener); }
  Emit (Typ: String, Detail ?: DetailType) {return this.eventTarget.DispatchEvent (neuer CustomEvent (Typ, {Detail})); }
}

// Nutzung const myeventbus = new eventbus<string> ('my-event-bus');
myeventbus.on ('Ereignisname', ({detail}) => {
  console.log (detail);
});

myeventbus.once ('Ereignisname', ({detail}) => {
  console.log (detail);
});

myeventbus.emit ('Ereignisname', 'Hallo'); // => Hallo Hallo
Myeventbus.emit ('Event-Name', 'World'); // => Welt</string></detailtype></detailtype></detailtype></detailtype>

Die folgende Demonstration liefert kompiliertes JavaScript.

Das war's! Wir haben gerade einen abhängig-freien Ereignishörbus erstellt, in dem eine Komponente eine andere Komponente von Änderungen benachrichtigen kann, um eine Aktion auszulösen. Solche Operationen erfordert keine vollständige Bibliothek, und die Möglichkeit, dass sie eingeschaltet wird, ist unbegrenzt.

Das obige ist der detaillierte Inhalt vonErstellen wir einen leichten nativen Eventbus in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!