Das Geheimnis hinter JavaScript EventEmitter

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 übergab Enter a Rückruf, der aufgerufen wird, wenn jemand das Ereignis emit (oder Scream) aufruft.

Einer der Vorteile von Funktionen in JavaScript besteht darin, dass Funktionen erste Objekte sind, sodass wir eine Funktion als Parameter an eine andere Funktion übergeben können, genau wie wir es zuvor mit unserer Abonnementmethode getan haben.

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 den Namen, den wir verwenden Ich möchte die diesem Ereignis übergebenen Daten übergeben. 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 von uns gelöschte Funktion von der Filtermethode der Sammlung abonnierter Funktionen ab (Array-Filter).

Verabschieden Sie sich von Speicherlecks!

Das obige ist der detaillierte Inhalt vonDas Geheimnis hinter JavaScript EventEmitter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!