JavaScript设计模式--观察者模式(发布订阅)

最近的学习中遇到了观察者模式,刚好之前买了《Javascript设计模式与开发事件》,于是翻到相关章节进行学习。以下是学习之后的总结,希望能对看到的你有所帮助。

理解观察者模式

1.指定发布者(比如售楼处)
2.给发布者添加一个缓存列表,向缓存列表存放回掉函数,用以通知订阅者(想买房的人)
3.发布消息,发布者便利缓存列表,以此触发里面存放的订阅者回掉函数

例如一个Node.js 原生自带 EventEmitter 模块

EventEmitter 模块,它是一个类,它的实例具有以下几个方法:on、emit、off:

on(eventName, func):监听 eventName 事件,事件触发的时候调用 func 函数。
emit(eventName, arg1, arg2, arg3...):触发 eventName 事件,并且把参数arg1, arg2, arg3... 传给事件处理函数。
off(eventName, func):停止监听某个事件。

class EventEmitter {
  /* TODO */
  constructor(){
    this.subList={}  //发布者
  }

  on(eventName,func){  
    if(!this.subList[eventName]){
     this.subList[eventName] = []   //是否有该订阅者,如果没有则添加
    }
   this.subList[eventName].push(func)   //向订阅者列表添加回掉函数
  }

  emit(eventName, ... args){  
    var fns = this.subList[eventName]  
    if(!fns) return        //如果没有该订阅者,返回函数
    fns.map(cd => {        //存在该订阅者时,遍历列表触发回掉函数
      cd(...args)
    })
  }

  off(eventName, func){
   var fns = this.subList[eventName]
    if(!fns || fns.length==0) return  
    var index = fns.indexOf(func)  
    fns.splice(index,1)   //将该事件从订阅者列表中删除
  }
}

未完待续

你可能感兴趣的:(JavaScript设计模式--观察者模式(发布订阅))