Explication détaillée du bus d'événements eventBus

bus événementiel

Fournissez un bus d'événements pour donner à d'autres composants ou modules le droit de surveiller et de modifier les données. Les actions spécifiques qu'il effectue peuvent inclure les éléments suivants :

1. Fournir une interface de suivi d’un événement
2. Fournit une interface pour annuler la surveillance
3. Interface qui déclenche des événements (peut transmettre des données)
4. Une fois l'événement déclenché, l'auditeur sera automatiquement averti

Ce qui suit est une introduction à la façon d'utiliser le code pour obtenir l'effet du bus d'événements.

Tout d'abord, créez un nouveau fichier globalement eventBus.js. Ce fichier est main.jsau niveau parallèle. Nous espérons qu'il exportera un bus d'événements. Il s'agit en fait d'un objet, qui contient le contenu de configuration pertinent du bus d'événements et contient des interfaces de méthodes.

/*
* 事件总线
* 具体完成上述的四个功能(其中第四个功能是通过前三个完成的)
* 导出对象，内部包含一些方法，供外部调用
*/
/*
   给一个全局的数组,每次有添加监听事件的时候,就往内部添加一个对象，其属性名是事件名，属性值是一个数组，
   里边是对此事件进行监听的处理函数(因为可能有很多组件或JS模块对该事件进行监听)，这里可以使用new Set()
   集合进行自动的去重操作！
   [
   	{'event1': [ handler1, handler2 ]},
   	{'event2': [ handler1 ]},
   ]
*/
const $listeners = [];
export default {
    
    
    // 开启某个事件的监听
    $on(eventName, handler){
    
    
        if(!$listeners[eventName]){
    
    
            $listeners[eventName] = new Set();
        }
        $listeners[eventName].add(handler);
    },
    // 取消某个事件的监听
    $off(eventName, handler){
    
    
        if(!$listeners[eventName]){
    
    
            return;
        }
        $listeners[eventName].delete(handler);
    },
    // 触发某个事件（可以传参），通过剩余参数接受
    $emit(eventName, ...args){
    
    
        if(!listeners[eventName]){
    
    
            return;
        }
        listeners[eventName].forEach((handler)=>{
    
    
            handler(...args);
        });
	}
}

Une fois le module terminé, nous allons dans main.jsle fichier à tester. Le code de test est le suivant

// 测试事件总线接口
import eventBus from "./eventBus";

function handler1(data){
    
    
  console.log("handler1", data);
}

function handler2(data){
    
    
  console.log("handler2", data);
}

eventBus.$on("event1", handler1);
eventBus.$on("event1", handler2);
eventBus.$on("event2", handler1);

window.eventBus = eventBus;
window.handler1 = handler1;
window.handler2 = handler2;

Interprété brièvement, ce code équivaut à ajouter deux objets au bus d'événements.

Le premier concerne les événements event1, qui contiennent deux fonctions de traitement handler1et handler2sont stockés dans un tableau et attribués à l'événement event1en tant que valeur d'attribut de l'événement.

Le premier concerne les événements event2, qui contiennent une fonction de traitement handler1, stockée dans un tableau et affectée à l'événement event2en tant que valeur d'attribut de l'événement.

La dernière partie consiste à enregistrer le bus d'événements globalement pour faciliter le débogage ultérieur sur la console.

Comme le montre la figure, lorsque vous exécutez le code suivant, vous pouvez voir que lorsqu'un event1événement est lancé à l'aide du bus d'événements, deux fonctions de traitement sont exécutées en même temps et les données de paramètres sont respectivement remplacées dans les fonctions de traitement.

Lorsqu'un événement est lancé à l'aide du bus d'événements event2, la fonction de gestionnaire est exécutée handler1et les paramètres sont 456remplacés dans la fonction de gestionnaire.

Testons la fonction pour annuler la surveillance des événements. Vous pouvez voir qu'après l'exécution, lorsque le bus d'événements génère un événement eventBus.$off("event1", handler1)ici , seule la fonction de traitement sera exécutée, ce qui signifie que la collection de fonctions de traitement d'événements sera supprimée. , mais n'a aucun effet. sur la fonction de gestionnaire d'événements de l'événement.event1handler2handler1event1event2

À ce stade, cela montre que la fonction du bus d'événements ci-dessus est terminée et peut atteindre avec succès les résultats attendus.

Mais pourquoi les attributs et les méthodes des membres de l'instance sont -ils si proches les uns des autres ? C'est parce que dans le développement général, une nouvelle instance est souvent utilisée $emitpour obtenir les effets ci-dessus, car une instance intègre plusieurs des méthodes ci-dessus.$onvuevuevue

Par conséquent, nous eventBus.jspouvons écrire ce qui suit dans le module de bus d’événements

import Vue from "vue";
export default new Vue({
    
    });

C'est très bien, car la méthode , , vueest intégrée à l'objet instance du composant , vous pouvez donc appeler directement le code de test d'origine sans modification.$on$off$emit