这里解释什么是发布-订阅模式

发布-订阅模型包含三个模块，发布者、订阅者和处理中心。这里的处理中心相当于报社大厅。出版商相当于一本杂志的负责人。他来中心注册一本新杂志，而订户相当于用户。我在中心订阅了这本杂志。每当出版商出版一本杂志时，办公大厅就会通知订阅者拿起这本新杂志。结合下图应该很好理解这一点。

事实上，发布者和订阅者是分离的。在实际开发中，我们经常会遇到某个方法中有很多逻辑，最简单的就是直接在方法中写。这是一种高度耦合的面向过程的编写方法。对代码维护不友好。发布-订阅模式将两者分开。我触发了一个事件(这里我们把触发这个方法定义为事件)，只通知了调度中心，不知道怎么处理，调度中心有多少人响应。我会让你知道的。用户只在调度中心订阅，有人打电话给调度中心回应。

还有一点是假设我们有三个js文件，事件在a.js中触发，事件的响应在b.js和c.js中，如果使用常规调用的方法，就必须把b.js和C.JS的方法转移到A.JS中.这是一个非常麻烦的操作。发布-订阅模式将调度中心全局挂起，所以我们只需要调用调度中心相应的方法进行注册和订阅。

Ps:还有一点要注意，很多人把观察者模式和发布-订阅模式混为一谈。其实两者还是有区别的，不过我在本文中就不细说了。

让我们实现一类发布-订阅模式

班级活动{

constructor () {}

//首先，定义一个事件容器来保存一个事件数组(因为可以有多个订阅者)

处理程序={}

//事件添加方法，以事件名称和事件方法为参数

addEventListener(类型，处理程序){

//首先判断处理程序中是否有类型事件容器，如果没有，创建一个新的数组容器

if(！(键入this . handlers){

this.handlers[type]=[]

}

//将事件保存在

this . handlers[类型]。推送(处理程序)

}

//触发事件的两个参数(事件名称、参数)

dispatchEvent(类型，params) {

//如果事件未注册，将引发错误

if(！(键入this . handlers){

返回新错误(“事件未注册”)

}

//方便触发

this . handlers[类型]。forEach(处理程序={

处理程序(.参数)

})

}

//事件删除参数(事件名称，已删除事件，如果没有第二个参数，将删除该事件的订阅和发布)

removeEventListener(类型，处理程序){

//引发无效事件

if(！(键入this . handlers){

返回新错误(“无效事件”)

}

if(！handler) {

//直接删除事件

删除this . handlers[类型]

} else {

const idx=this.handlers[type]。findIndex(ele=ele===handler)

//引发异常事件

if (idx===-1) {

返回新错误(“无绑定事件”)

}

//移除事件

this . handlers[类型]。拼接(idx，1)

if (this.handlers[type]。length===0) {

删除this . handlers[类型]

}

}

}

}

Ok到现在已经实现了发布订阅的基本功能。其实很简单。如果有什么奇怪的需求，可以连到里面。

以下是完整的使用演示

Var event=new Event() //创建事件实例

//定义自定义事件：'load '

函数加载(参数){

console.log('load '，params)

}

event.addEventListener('load '，load)

//定义另一个加载事件

函数load2(参数){

console.log('load2 '，参数)

}

event.addEventListener('load '，load2)

//触发此事件

事件。dispatchevent ('load '，' load事件触发器')

//移除load2事件

event . removeEventlistener(' load '，load2)

//删除所有加载事件

event . removeEventlistener(' load ')