Abhörereignisse des Ereignisemitters

Dieses Mal präsentiere ich Ihnen die Vorsichtsmaßnahmen bei der Verwendung von Event Emitter zum Überwachen von Ereignissen.

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 „event:name-changed“, und übergibt einen Rückruf, der aufgerufen wird, wenn jemand (oder Scream) Callback wird aufgerufen, wenn das Ereignis eintritt. emit

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 .

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

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);
  }
}

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

Das obige ist der detaillierte Inhalt vonAbhörereignisse des Ereignisemitters. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!