说明

事件总线，类似于浏览器，监听用户的点击事件（发布者），然后对应的元素如按钮，执行对应的响应（订阅者）
image.png
JS - 事件总线 - 图2

第三方库

image.png
image.png

image.png
mitt库介绍： https://www.yuque.com/yejielin/mypn47/nfazn1#tFTPf，算是比较轻量级的
VueX也算，比较重量级
Vue中的依赖注入也算一种：https://www.yuque.com/yejielin/mypn47/nfazn1#EgdGw

自己实现

实现方案

定义一个类，类可以更好地复用，类中有监听方法、停止监听方法和发布方法。

然后创建一个实例，导出这个实例。
image.png

然后在其他文件中使用，订阅名为”abc”的事件，如果发布了这个事件，就执行后面的函数，还可以给这个函数定义一个this
image.png

其他文件中可以发出事件，事件名为”abc”，还可以传参数123
image.png

总线 eventBus

首先在构造器里面定义实例的一个属性 eventBus，是一个对象，用于保存监控发布要执行的函数，
里面的key就是事件的名称，
里面的value就是要执行的函数的数组，把同一个事件要执行的函数都放入数组。
image.png

订阅方法 on

on订阅方法，有3个参数，第一个是监听的事件名，第二个是事件发布后要执行的函数，第三个是执行时函数的this。
先从数组里面通过事件名获取对应的函数数组，如果是空的，就创建数组，把要执行的函数和this对象放入数组里面。
image.png
外面文件可以通过on的方式订阅事件
image.png

发布方法 emit

发布方法有2个参数，第一个是事件名，第二个是各种参数
先通过事件名，从总线中，通过事件名获取对应的要执行的函数数组，
如果没有订阅过，就不处理；
如果有订阅，就遍历这个数组，然后通过 函数.apply(this对象 , 参数) 的方式调用这些函数
image.png
外面文件可以通过emit方法发布事件
image.png

移除订阅 off

想要可以移除订阅，必须要先获取要移除的函数（的内存地址），才能移除，因此要一个变量储存这个函数（的内存地址）
image.png
image.png

off方法，先从总线中获取对应事件对应的函数数组，如果是空的就不处理。
如果有数组，就遍历数组，然后用splice方法移除就可以了。
也可以从最后一个元素往前遍历，避免说遍历过程中删除了1个元素，导致数组的.length 长度减少，遍历不到最后的元素。
image.png