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)   //将该事件从订阅者列表中删除
  }
}
复制代码

未完待续

转载于:https://juejin.im/post/5a31d58ff265da431440b595