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 ...

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