觀察者模式
觀察者模式有幾個要素:
需要將需要觀察的對象存放起來
在需要的地方觸發(fā)該觀察者
第三觀察者需要分類，同一類的觀察者可監(jiān)聽同一個事件，監(jiān)聽被觸發(fā)時硝烂，所有的觀察者都需要被通知到别威。
具體實現(xiàn)一個觀察者模式如下：
;(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])}}//觸發(fā)觀察者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對象來存儲觀察者。注冊觀察者的時候凳枝，每收到一個觀察者注冊抄沮，就按類型將他們分類存放，同一類的觀察者存儲在一個數(shù)組中岖瑰。觸發(fā)觀察者的代碼中叛买，收到觸發(fā)的命令后，找出觸發(fā)的類型蹋订，調用所有已注冊的同類的觀察者率挣。刪除觀察者，就將注冊的所有觀察者刪除露戒，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 ...
至此椒功，就實現(xiàn)了一個簡單的觀察者模式
