Créons un bus d'événement natif léger en JavaScript

Event Bus est un modèle de conception (bien que nous discuterons de JavaScript ici, c'est un modèle de conception dans n'importe quelle langue) qui peut être utilisé pour simplifier la communication entre les différents composants. Il peut également être considéré comme une publication / abonnement ou un pubsub.

L'idée est que les composants peuvent écouter le bus de l'événement pour comprendre quand leurs opérations sont effectuées. Par exemple, le composant du panneau d'onglet peut écouter les événements indiquant qu'il modifie l'onglet actif. Bien sûr, cela peut être causé en cliquant sur l'un des onglets, il est donc entièrement géré dans ce composant. Cependant, avec le bus de l'événement, certains autres éléments peuvent dire à l'onglet de modifier. Imaginez une erreur dans laquelle la soumission de formulaire amène l'utilisateur à recevoir une alerte dans un onglet spécifique, donc le formulaire envoie un message au bus d'événements, en demandant au composant onglet de modifier l'onglet actif en un onglet contenant l'erreur. C'est à quoi il ressemble dans le bus de l'événement.

Le pseudo-code pour cette affaire est le suivant…

 // Tab composant onglets.Changetab = id => {
  // modifie l'opération DOM de l'onglet actif.
};
MyEventBus.Subscribe ("Change-Tab", Tabs.ChangeTab (ID));

// Autres composants ...
// quelque chose se passe, puis:
MyEventBus.Publish ("Change-Tab", 2);

Avez-vous besoin d'une bibliothèque JavaScript pour implémenter cela? (Astuce Question: vous n'avez jamais besoin d'une bibliothèque JavaScript). Eh bien, il existe de nombreuses options:

• Pubsubjs
• EventEmitter3
• Postal.js
• JQuery prend même en charge les événements personnalisés, ce qui est très pertinent pour ce modèle.

Consultez également Mitt, une bibliothèque avec seulement 200 octets de GZIP. Ce modèle simple a inspiré les gens à le résoudre par eux-mêmes d'une manière aussi concise que possible.

Faisons-le nous-mêmes! Nous n'utilisons aucune bibliothèque tierce, mais profitons plutôt du système d'écoute d'événements qui est déjà intégré à JavaScript, addEventListener que nous connaissons tous et que nous aimons.

Premièrement, un contexte

L'API addEventListener dans JavaScript est une fonction membre de EventTarget . La raison pour laquelle nous pouvons lier l'événement de clic au bouton est que l'interface prototype de ( HTMLButtonElement ) est indirectement héritée de EventTarget .

Contrairement à la plupart des autres interfaces DOM, vous pouvez utiliser le new mot-clé pour créer directement EventTarget . Il est pris en charge dans tous les navigateurs modernes, mais seulement récemment. Comme nous pouvons le voir dans la capture d'écran ci-dessus, Node hérite EventTarget , de sorte que tous les nœuds DOM ont une méthode addEventListener .

Conseils

Je recommande d'utiliser un type de nœud extrêmement léger comme bus d'écoute d'événements: commentaires HTML ( <!-- --> ).

Pour les moteurs de rendu de navigateur, les commentaires HTML ne sont que des commentaires dans le code et n'ont aucune fonctionnalité autre que de fournir du texte descriptif aux développeurs. Cependant, comme les commentaires sont toujours écrits en HTML, ils finissent par apparaître dans le DOM en tant que vrais nœuds et ont leur propre interface prototype - Comment - qui hérite de Node .

La classe Comment peut être créée directement à partir de new , tout comme EventTarget :

 const MyEventBus = nouveau commentaire («my-event-bus»);

Nous pouvons également utiliser l' document.createComment antique mais largement soutenue. API de création. Il nécessite un paramètre de données, c'est-à-dire le contenu du commentaire. Cela peut même être une chaîne vide:

 const MyEventBus = document.CreateComment («my-event-bus»);

Maintenant, nous pouvons utiliser dispatchEvent pour publier un événement, qui accepte un objet Event . Pour transmettre les données d'événements définies par l'utilisateur, utilisez CustomEvent , où le champ detail peut être utilisé pour contenir des données.

 MyEventbus.DispatchEvent (
  Nouveau garde-gueule ('événement-nom', {
    Détail: «Data d'événements»
  })
));

Internet Explorer 9-11 prend en charge CustomEvent , mais aucune version ne prend en charge new CustomEvent . Utiliser document.createEvent pour le simuler est complexe, donc si le support IE est important pour vous, il existe un moyen de le remplir.

Maintenant, nous pouvons lier l'auditeur d'événements:

 MyEventBus.AddeventListener ('Event-Name', ({Detail}) => {
  console.log (détail); // => événement-données
});

Si l'événement est destiné à tirer une seule fois, nous pouvons utiliser { once: true } pour une liaison unique. D'autres options ne conviennent pas ici. Pour supprimer l'écouteur d'événements, nous pouvons utiliser le natif removeEventListener .

déboguer

Le nombre d'événements liés à un seul bus d'événements peut être très important. Si vous oubliez de les supprimer, il peut également y avoir une fuite de mémoire. Et si nous voulons savoir combien d'événements sont liés à myEventBus ?

myEventBus est un nœud DOM, donc Devtools dans le navigateur peut le vérifier. Là, nous pouvons trouver l'événement dans l'onglet Elements → Événement d'événement. Assurez-vous de décocher "ancêtre" pour masquer les événements liés document et à window .

Exemple

Un inconvénient est que la syntaxe de EventTarget est légèrement verbeux. Nous pouvons écrire un simple wrapper pour cela. Voici une démonstration en dactylographie:

 Class Eventbus<detailtype any> {
  EventtTarget privé: EventTarget;
  constructeur (description = '') {this.eventtarget = document.appendChild (document.CreateComment (Description)); }
  sur (Type: String, auditeur: (événement: Customevent<detailtype> ) => void) {this.eventtarget.addeventListener (type, écouteur); }
  Une fois (Type: String, auditeur: (événement: Customevent<detailtype> ) => void) {this.eventtarget.addeventListener (type, écouteur, {une fois: true}); }
  OFF (Type: String, auditeur: (événement: Customevent<detailtype> ) => void) {this.eventtarget.reMoveEventListener (type, écouteur); }
  EMIT (Type: String, Detail ?: DetailType) {return this.eventtarget.dispatchEvent (new Customevent (type, {Detail})); }
}

// usage const MyEventbus = New Eventbus<string> («my-event-bus»);
MyEventBus.on ('Event-Name', ({Detail}) => {
  console.log (détail);
});

MyEventBus.once ('Event-Name', ({Detail}) => {
  console.log (détail);
});

MyEventBus.Emit («Événement-nom», «bonjour»); // => Bonjour bonjour
MyEventBus.Emit («Événement-nom», «monde»); // => monde</string></detailtype></detailtype></detailtype></detailtype>

La démonstration suivante fournit un JavaScript compilé.

C'est ça! Nous venons de créer un bus d'écoute d'événements sans dépendance où un composant peut informer un autre composant des modifications pour déclencher une action. Faire de telles opérations ne nécessite pas de bibliothèque complète, et la possibilité de s'allumer est illimité.

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!