阅读 54

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')
}
复制代码
文章分类
前端
文章标签