JS EventEmitter-Fall-Tutorial

Dieses Mal bringe ich Ihnen ein JS EventEmitter-Fall-Tutorial. Was sind die Vorsichtsmaßnahmen bei der Verwendung von JS EventEmitter? Hier ist ein praktischer Fall, schauen wir uns das an.

Hier ist es unser Ziel, unseren eigenen Event Emitter zu erstellen, um das Geheimnis dahinter zu verstehen. Schauen wir uns also an, wie der folgende Code funktioniert. Freunde, die ihn benötigen, können darauf verweisen.

Was ist Event Emitter?

Event Emitter klingt, als würde er nur ein Ereignis auslösen Alles kann überwacht werden.

Stellen Sie sich ein Szenario vor, in dem Sie in Ihrem asynchronen Code das Eintreten einiger Ereignisse „aufrufen“ und andere Teile von Ihnen Ihren „Ruf“ hören und ihre Gedanken registrieren lassen.

Es gibt eine Reihe verschiedener Implementierungen des Event Emitter-Musters für unterschiedliche Zwecke, aber die Grundidee besteht darin, ein Framework mit Event-Management und der Möglichkeit, diese zu abonnieren, bereitzustellen.

Hier ist es unser Ziel, unseren eigenen Event Emitter zu erstellen, um das Geheimnis dahinter zu verstehen. Sehen wir uns also an, wie der folgende Code funktioniert.

let input = document.querySelector("input[type="text"]");
let button = document.querySelector("button");
let h1 = document.querySelector("h1");
button.addEventListener("click", () => {
  emitter.emit("event:name-changed", { name: input.value });
});
let emitter = new EventEmitter();
emitter.subscribe("event:name-changed", data => {
  h1.innerHTML = `Your name is: ${data.name}`;
});

Lass uns anfangen.

class EventEmitter {
  constructor() {
    this.events = {};
  }
}

Wir erstellen zunächst eine EventEmiiter-Klasse und initialisieren die leere Objekteigenschaft des Ereignisses. Der Zweck dieses Ereignisattributs besteht darin, unsere Ereignissammlung zu speichern. Dieses Ereignisobjekt verwendet den Ereignisnamen als Schlüssel und die Abonnentensammlung als Wert. (Sie können sich jeden Abonnenten als Funktion vorstellen).

Abonnementfunktion

subscribe(eventName, fn) {
  if (!this.events[eventName]) {
    this.events[eventName] = [];
  }
  this.events[eventName].push(fn);
}

Diese Abonnementfunktion ruft den Ereignisnamen ab, in unserem vorherigen Beispiel war es „event:name-changed“, und übergibt einen Rückruf, der aufgerufen wird, wenn jemand (oder Scream) Callback wird aufgerufen, wenn das Ereignis eintritt. emit

Einer der Vorteile von Funktionen in

JavaScript besteht darin, dass die Funktion das erste Objekt ist, sodass wir die Funktion wie zuvor mit unserer Abonnementmethode als Parameter einer anderen -Funktion übergeben können .

Wenn dieses Ereignis nicht registriert ist, müssen wir zum ersten Mal einen Anfangswert dafür festlegen, den Ereignisnamen als Schlüssel und ein ihm zugewiesenes leeres Array initialisieren, und dann fügen wir die Funktion darin ein Array, sodass wir dieses Ereignis über Emit aufrufen möchten.

Aufruffunktion

emit(eventName, data) {
  const event = this.events[eventName];
  if (event) {
    event.forEach(fn => {
      fn.call(null, data);
    });
  }
}

Diese Aufruffunktion akzeptiert den Ereignisnamen, also den Namen, den wir „aufrufen“ möchten, und die Daten, die wir an dieses Ereignis übergeben möchten. Wenn dieses Ereignis in unseren Ereignissen vorhanden ist, durchlaufen wir alle abonnierten Methoden mit den Daten.

Mit dem obigen Code können Sie alles tun, was wir gesagt haben. Aber wir haben immer noch ein Problem. Wir brauchen eine Möglichkeit, die Registrierung dieser Abonnements aufzuheben, wenn wir sie nicht mehr benötigen, denn wenn Sie dies nicht tun, entsteht ein Speicherverlust.

Lassen Sie uns dieses Problem lösen, indem wir eine Methode zum Aufheben der Registrierung in der Abonnementfunktion zurückgeben.

subscribe(eventName, fn) {
  if (!this.events[eventName]) {
    this.events[eventName] = [];
  }
  this.events[eventName].push(fn);
  return () => {
    this.events[eventName] = this.events[eventName].filter(eventFn => fn !== eventFn);
  }
}

Da JavaScript-Funktionen erste Objekte sind, können Sie eine Funktion innerhalb einer Funktion zurückgeben. Jetzt können wir die Funktion zum Aufheben der Registrierung wie folgt aufrufen:

let unsubscribe = emitter.subscribe("event:name-changed", data => console.log(data));
unsubscribe();

Wenn wir die Funktion zum Aufheben der Registrierung aufrufen, hängt die Funktion, die wir löschen, von der Filtermethode (Array-Filter) der Abonnementfunktionssammlung ab.

Verabschieden Sie sich von Speicherlecks!

Das obige ist der detaillierte Inhalt vonJS EventEmitter-Fall-Tutorial. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!