Le secret derrière JavaScript EventEmitter

Ici, notre objectif est de créer notre propre émetteur d'événements pour comprendre le secret qui se cache derrière celui-ci. Voyons donc comment fonctionne le code suivant. Les amis qui en ont besoin peuvent s'y référer

Qu'est-ce que l'émetteur d'événement ?

L'émetteur d'événement semble déclencher simplement un événement. peut être n’importe quoi. Tout peut être surveillé.

Imaginez un scénario dans lequel, dans votre code asynchrone, vous « appelez » certains événements à se produire et laissez d'autres parties de vous entendre votre « appel » et enregistrer leurs pensées.

Il existe un certain nombre d'implémentations différentes du modèle Event Emitter à des fins différentes, mais l'idée de base est de fournir un cadre avec la gestion des événements et la possibilité de s'y abonner.

Ici, notre objectif est de créer notre propre émetteur d'événements pour en comprendre le secret. Voyons donc comment fonctionne le code ci-dessous.

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

Commençons.

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

Nous créons d'abord une classe EventEmiiter et initialisons la propriété d'objet vide events. Le but de cet attribut d'événements est de stocker notre collection d'événements. Cet objet d'événements utilise le nom de l'événement comme clé et la collection d'abonnés comme valeur. (Vous pouvez considérer chaque abonné comme une fonction).

Fonction d'abonnement

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

  this.events[eventName].push(fn);
}

Cette fonction d'abonnement obtient le nom de l'événement, dans notre exemple précédent c'était "event:name-changed" Et passe dans un rappel, qui est appelé lorsque quelqu'un appelle l'événement emit (ou cri).

L'un des avantages des fonctions en JavaScript est que les fonctions sont d'abord des objets, nous pouvons donc passer une fonction en paramètre à une autre fonction, tout comme nous le faisions avec notre méthode d'abonnement auparavant.

Si cet événement n'est pas enregistré, nous devons lui définir une valeur initiale pour la première fois, le nom de l'événement comme clé et initialiser un tableau vide qui lui est attribué, puis nous y mettons la fonction tableau afin que nous voulions appeler cet événement via émettre.

Fonction d'appel

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

Cette fonction d'appel accepte le nom de l'événement, qui est le nom que nous voulons "appeler", et notre Les données que vous souhaitez transmettre à cet événement. Si cet événement existe dans nos événements, nous parcourrons toutes les méthodes souscrites avec les données.

L'utilisation du code ci-dessus peut faire tout ce que nous avons dit. Mais nous avons toujours un problème. Nous avons besoin d'un moyen de désenregistrer ces abonnements lorsque nous n'en avons plus besoin, car si vous ne le faites pas, vous créerez une fuite de mémoire.

Résolvons ce problème en renvoyant une méthode de désinscription dans la fonction d'abonnement.

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

Étant donné que les fonctions JavaScript sont d'abord des objets, vous pouvez renvoyer une fonction dans une fonction. Nous pouvons donc maintenant appeler la fonction de désinscription comme suit :

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

unsubscribe();

Lorsque nous appelons la fonction de désinscription, la fonctionnalité que nous supprimons dépend de la méthode de filtrage de l'abonnement pour collection de fonctions (filtre Array).

Dites adieu aux fuites de mémoire !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!