js 觀察者模式
阿新 • • 發佈:2017-09-10
書寫方式 發生 ray call blog return bsp args span
觀察者模式定義一種一對多的關系,多個觀察者訂閱一個主題對象,當主題對象發生改變的時候通知所有觀察者,使他們能實現更新。
具體實現方式: 定義一個被觀察對象,定義一個主題數組,觀察者訂閱主題通過往數組對象內添加回調函數來實現,當主題發生改變時輪流調用回調函數。
var subpub= { topics: [], uid: 0, //訂閱 subscribe: function(topic, callback){ var tmp= this.topics[topic] || [] tmp.push({ token:++this.uid, fun: callback }) this.topics[topic]= tmp }, //發布 publish: function(topic){ if(!this.topics[topic]){return;} var args= Array.prototype.slice.apply(arguments).slice(1) for(var i=0; i< this.topics[topic].length; i ++){this.topics[topic][i].fun.apply(this, args) } } }; subpub.subscribe(‘a‘,function(){ alert(1) }) subpub.subscribe(‘a‘,function(a, b){ alert(a+b) }) subpub.publish(‘a‘, 2, 5)
有時我們不喜歡使用那麽多this,不想把topics,uid作為被觀察對象的參數,則可借助自執行函數的封閉作用域,結合閉包原理來換一種書寫方式。
var subpub= {}; (function(sp){ console.log(sp)var topics=[], uid=0; //訂閱 sp.subscribe= function(topic, callback){ var tmp= topics[topic] || [] tmp.push({ token: ++uid, fun: callback }) topics[topic]= tmp }; //發布 sp.publish= function(topic){ if(!topics[topic]){return;} var args= Array.prototype.slice.apply(arguments).slice(1) for(var i=0; i< topics[topic].length; i ++){ topics[topic][i].fun.apply(this, args) } } }(subpub)) subpub.subscribe(‘a‘,function(){ alert(1) }) subpub.subscribe(‘a‘,function(a, b){ alert(a+b) }) subpub.publish(‘a‘, 2, 5)
js 觀察者模式