js观察者模式如何实现

观察者模式

观察者模式有几个要素:

需要将需要观察的对象存放起来

在需要的地方触发该观察者

第三观察者需要分类,同一类的观察者可监听同一个事件,监听被触发时,所有的观察者都需要被通知到。

具体实现一个观察者模式如下:

;(function(w) {varListen=function() {this.pool=newMap();}//注册观察者Listen.prototype.on=function(type,cb) {if(this.pool.get(type)) {this.pool.get(type).push(cb)}else{this.pool.set(type, [cb])}}//触发观察者Listen.prototype.emit=function(type,...args) {if(this.pool.get(type)) {this.pool.get(type).forEach(listener=>{listener.apply(type, args)})}else{console.log('undefined type:', type)}}//删除观察者Listen.prototype.remove=function(type) {if(this.pool.get(type)) {this.pool.delete(type)}else{console.log('undefined type:', type)}returnthis;}w.Listen=Listen;})(window)

上面代码里使用了es6 的Map对象来存储观察者。注册观察者的时候,每收到一个观察者注册,就按类型将他们分类存放,同一类的观察者存储在一个数组中。触发观察者的代码中,收到触发的命令后,找出触发的类型,调用所有已注册的同类的观察者。删除观察者,就将注册的所有观察者删除,return this方便链式调用

调用示例如下:

varlistener=newListen()listener.on('click', ()=>{console.log('clicked 1 ...')})listener.on('click', ()=>{console.log('clicked 2 ...')})listener.on('hover', ()=>{console.log('hover 1 ...')})listener.emit('click')listener.emit('hover')listener.remove('click').on('click', ()=>{console.log('click again ...')})listener.emit('click')//clicked 1 ...//clicked 2 ...//hover 1 ...//click again ...

至此,就实现了一个简单的观察者模式

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

相关阅读更多精彩内容

  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,346评论 1 10
  • 观察者模式: 这是一种创建松散耦合代码的技术。它定义对象间 一种一对多的依赖关系,当一个对象的状态发生改变时,所有...
    欧阳司空阅读 554评论 0 1
  • 个人入门学习用笔记、不过多作为参考依据。如有错误欢迎斧正 目录 简书好像不支持锚点、复制搜索(反正也是写给我自己看...
    kirito_song阅读 2,667评论 1 37
  • Module definition patterns 除了作为加载依赖的机制之外,模块系统也是一种用于定义AP...
    宫若石阅读 576评论 0 0
  • 回头看到爸妈的眼神,依然想要哽咽。即使已经在北京待了有一年,再次离家进京还是会有些许害怕,心里莫名的难受。是因为对...
    凉嗖嗖阅读 319评论 0 1

友情链接更多精彩内容