美文网首页
JavaScript设计模式--观察者模式(发布订阅)

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

作者: 爱吃的根号三 | 来源:发表于2017-09-19 12:01 被阅读24次

最近的学习中遇到了观察者模式,刚好之前买了《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设计模式六(发布-订阅模式)

    JavaScript设计模式六(发布-订阅模式) 发布-订阅模式又叫做观察者模式,定义: 定义对象间的一种一对多的...

  • 观察者模式js实现

    参看书籍JavaScript模式第七章设计模式我的理解:观察者模式又叫订阅/发布模式。被观察者(发布者)内部需要有...

  • RxJava基础—观察者模式

    设计模式-观察者模式 观察者模式:观察者模式(有时又被称为发布(publish )-订阅(Subscribe)模式...

  • 发布订阅模式(观察者模式)

    发布订阅模式(观察者模式) 发布订阅也叫观察者模式 发布 && 订阅 使用

  • 17.第四篇:观察者模式

    本文摘自 《JavaScript 设计模式》张容铭 著 版权归原作者所有 观察者模式:又被称作发布-订阅者模式或消...

  • javascript设计模式

    设计模式 观察者模式参考:汤姆大叔的博客 观察者模式又叫发布订阅模式(Publish/Subscribe),它定义...

  • Javaの设计模式之观察者模式

    推荐阅读:《设计模式之禅》 Observer Pattern 设计模式之观察者模式(发布订阅模式) Demo gi...

  • 发布-订阅模式

    摘自《JavaScript设计模式与开发实践》 发布 - 订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关...

  • 8发布-订阅模式

    来源:JavaScript设计模式与开发实践 发布-订阅模式:又叫观察者模式,它定义对象间的一种一对多的依赖关系,...

  • 观察者模式&&订阅发布模式

    观察者模式&&订阅发布模式 参考:知乎-观察者模式 vs 发布订阅模式[https://zhuanlan.zhih...

网友评论

      本文标题:JavaScript设计模式--观察者模式(发布订阅)

      本文链接:https://www.haomeiwen.com/subject/oudbsxtx.html