Tutoriel de cas JS EventEmitter

Cette fois, je vous propose un tutoriel sur le cas JS EventEmitter. Quelles sont les précautions lors de l'utilisation de JS EventEmitter Voici un cas pratique, jetons un coup d'oeil.

Ici, notre objectif est de créer notre propre émetteur d'événements pour en comprendre le secret. 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, il s'agissait de "event:name-changed" et transmet un rappel qui sera appelé lorsque quelqu'un appelle emit (ou scream) le rappel est appelé lorsque l'événement se produit.

Un des avantages des fonctions en JavaScript est que la fonction est le premier objet, on peut donc passer la fonction en paramètre d'une autre fonction comme avant avec notre méthode d'abonnement .

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 les données que nous voulons 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 fonction que nous supprimons dépend de la méthode de filtrage (Filtre Array) de la collection de fonctions d'abonnement.

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!