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

未完待续

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容