Pubsub(订阅与发布)、EventBus(事件总线)

介绍

用于组件之间通信，可以实现任意组件的通信
发布订阅模式

使用

下载

npm i pubsub-js -s

引入，用到的文件都要引入

import pubsub from 'pubsub-js'

发布

pubsub.publish("hello", 666)

订阅

this.d_pid = pubsub.subscribe("hello", (msgName, data) => {
      console.log("有人发布了hello消息，" + msgName + "回调执行了，收到数据：" + data);
      //有人发布了hello消息，hello回调执行了，收到数据：666
})

订阅参数解释

PubSub.subscribe(name,(meg,data)=>{})
第一个参数是订阅的事件
第二个参数是别人发布了订阅以后执行的函数，接收的meg是事件名字name的值,data是别人发布订阅传递过来的数据

发布参数解释

pubsub.publish(name,data)
第一个参数是发布事件（与订阅事件同名，才能对接）
第二个是传递参数

this.d_pid ： 作为标识（销毁的时候好销毁）
组件销毁时，一定要及时清除订阅事件

事件总线

事件总线，说白了就是一个对象，它有一个events对象，里面存了一些键值对，键值为callback(回调函数，记住回调函数的作用域取决于所定义的时候)，还有emit事件，就是拿到events对象中属性对应的键值，就是对应的回调函数，然后把参数加进去，执行即可。其它的取消对应的事件和取消全部事件就更简单了。
我们在用的时候，例如Vue，我们直接生成一个实例，挂载到Vue全局对象上即可，当然这里说的是Vue2版本，总之要保证我们订阅发布操作要再同一个实例上。如果不在同一个实例对象上就没有什么意义。

我们来用代码实现一下事件总线

type Callback<T> = (payload: T) => void;

class EventBus<T> {
    private events: { [event: string]: Array<Callback<T>> } = {};
	// 注册事件
    on(event: string, callback: Callback<T>): void {
        if (!this.events[event]) {
            this.events[event] = [];
        }
        this.events[event].push(callback);
    }
	// 发射事件
    emit(event: string, payload: T): void {
        if (this.events[event]) {
            this.events[event].forEach(callback => {
                callback(payload);
            });
        }
    }
	// 取消事件
    off(event: string, callback: Callback<T>): void {
        if (this.events[event]) {
            this.events[event] = this.events[event].filter(cb => cb !== callback);
        }
    }
	// 清空事件
    clear(): void {
        this.events = {}
    }
}

我们首先定义了一个泛型类 EventBus，它接受一个类型参数 T，表示事件携带的数据类型。接着，我们定义了一个类型别名 Callback，它表示一个回调函数，它接受一个类型为 T 的参数，并返回 void。然后，我们在 EventBus 类中使用了一个对象来存储事件名称和对应的回调函数，以及 on、emit 和 off 三个方法来注册、触发和移除事件。