Analyse der zugrunde liegenden Logik von JavaScript EventEmitter

Dieses Mal werde ich Ihnen die Analyse der zugrunde liegenden Logik von JavaScript EventEmitter und die Notizen der Analyse der zugrunde liegenden Logik von JavaScript EventEmitter vorstellen ein Blick.

Was ist ein Event-Emitter?

Event-Emitter klingt, als würde er einfach ein Ereignis auslösen, und alles kann dieses Ereignis abhören.

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 „

“ und übergibt einen Rückruf, der aufgerufen wird, wenn jemand event:name-changed anruft ( oder Der Rückruf wird aufgerufen, wenn das Scream-Ereignis auftritt. 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 Unregister-Funktion wie folgt aufrufen:

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

Wenn wir die Unregister-Funktion 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 vonAnalyse der zugrunde liegenden Logik von JavaScript EventEmitter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!