1. 程式人生 > >js 觀察者模式

js 觀察者模式

書寫方式 發生 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 觀察者模式