js设计模式-----发布订阅者模式

定义：

• 发布订阅者模式其实是对象间一对多的依赖关系（利用消息队列，在前端代码的表现形式通常是以异步的表现形式）
• 当一个对象的状态发生改变时，所有依赖于他的对象都得到状态改变的通知
• 订阅者（Subscriber)把自己想订阅的时间注册（Subscribe)到调度中心，当发布者发布该时间到调度中心（该事件触发时），由调度中心统一调度，订阅者注册到调度中心的处理代码。

案例：

实现思路：

1.创建一个类

2.在该类上创建一个缓存列表（调度中心）

3.on方法用来把函数fn都加到缓存列表（订阅者注册事件到调度中心）

4.emit方法取到event事件类型，根据event值去执行对应缓存列表中的函数（发布者发布事件到调度中心，调度中心处理代码）

5.off方法可以根据event事件类型取消订阅

具体代码：

class Observer {
    constructor(){
        //消息中心
       this.message = {}
    }
    
    //订阅者注册事件
    $on(type,fn){
        //如果之前没有注册过，先初始化一个数组
        if(!this.message[type]){
            this.message[type] = []
        }
        //将事件push到消息中心
        this.message[type].push(fn)
    }
    
    //删除订阅事件
    $off(type,fn){ 
        //判断是否注册了
        if(this.message[type]) return //如果没有注册
        //如果只有一个参数
        if(!fn){
            //取消注册事件
            this.Message[type] = undefined
        }
        //将该方法去除
        this.message[type] = this.messsage[type].filter(item => item !== fn) 
    }

    $emit(type){
        //判断是否订阅
        if(!this.message[type]) return
        //如果订阅了，依次执行函数
        this.message[type].forEach(item => item())
        
    }
}  

//使用构造函数创建一个函数
const person = new Observer()

//向person订阅了abc事件
person.$on('abc',event1)
person.$on('abc',event2)
//订阅了aaa事件
person.$on('aaa',event3)
person.$on('aaa',event4)

//取消了abc的event1
person.$off('abc'，event1)

//发布
person.$emit('abc') //打印了222

//事件1
event1(){
    console.log('1111')
}
//事件2
event2(){
    console.log('2222')
}

//事件3
event3(){
    console.log('333')
}
//事件4
event4(){
    console.log('444')
}