js實現觀察者模式

　　觀察者模式：設計該模式背后的主要動力是促進形成松散耦合。在這種模式中，並不是一個對象調用另一個對象的方法，而是一個對象訂閱另一個對象的特定活動並在狀態改變后獲得通知。訂閱者也稱為觀察者，而補觀察的對象稱為發布者或主題。當發生了一個重要的事件時，發布者將會通知（調用）所有訂閱者並且可能經常以事件對象的形式傳遞消息。

　　思路:發布者對象需要一個數組類型的屬性，以存儲所有的訂閱者。訂閱（即注冊）行為就是將新的訂閱者加入到這個數組中去，則注銷即是從這個數組中刪除某個訂閱者。此外，發布消息，就是循環遍歷訂閱者列表並通知他們。

　　

　　這里我的大體思路是對的，但是在發布者之外定義了一個新的類即訂閱者。在訂閱者中定義了一個方法getNews以便在發布者發布消息時調用該方法。然后面試官說這樣太麻煩了，萬一訂閱者沒有這個方法呢？然后我不是很懂……於是在發布消息時直接傳遞了參數：obj.news = msg; 然后面試官說這樣不是更麻煩了嗎？這樣的話如果訂閱者沒有news這個屬性怎么辦？還得判斷訂閱者是否有news這個屬性，沒有的話就會出現undifined的報錯。然后我就不知道該怎么做了……然后面試官為人特別nice，告訴我說可以用繼承，或者是在注冊時候就傳入一個function。

 

下來后上網查相關，注意點如下：

　　1. 發送消息即通知，意味着調用訂閱者對象的某個方法。故當用戶訂閱信息時，該訂閱者需要向paper的subscribe()提供它的其中一個方法。--------這應該就是面試官所說的注冊時候就傳入一個方法。

　　2. 發布對象paper需要具有以下成員：

　　　　a、 subscribers：一個數組，存儲訂閱者

　　　　b、 subscribe()：注冊/訂閱，將訂閱者添加到subscribers數組中

　　　　c、 unsubscribe()： 取消訂閱。從subscribers數組中刪除訂閱者

　　　　d、 publish() 循環遍歷subscribers數組中的每一個元素，並且調用他們注冊時所提供的方法

　　　　所有這三種方法都需要一個type參數，因為發布者可能觸發多個事件（比如同時發布一本雜志和一份報紙）而用戶可能僅選擇訂閱其中一種，而不是另外一種。

　　3、

 

 

參考《JavaScript模式》一書，使用字面量。實現代碼如下：

        //由於這些成員對於任何發布者對象都是通用的，故將它們作為獨立對象的一個部分來實現是很有意義的。那樣我們可將其復制到任何對象中，並將任意給定對象變成一個發布者。

        //如下實現一個通用發布者

        //定義發布者對象...{}是定義一個對象
        var publisher = {
            subscribers: {
                any: []         //event type: subscribers
            },
            subscribe: function(fn,type){
                type = type || 'any';
                if(typeof this.subscribers[type] === "undefined"){
                    this.subscribers[type] = [];
                }
                this.subscribers[type].push(fn);
            },
            unsubscribe: function(fn,type){
                this.visitSubscribers('unsubscribe', fn, type);
            },
            publish: function(publication, type){
                this.visitSubscribers('publish',publication,type);
            },
            visitSubscribers:function(action,arg,type){
                var pubtype = type ||'any',
                    subscribers = this.subscribers[pubtype],
                    i,
                    max = subscribers.length;
                for(i=0;i<max;i++){
                    if(action == "publish"){
                        subscribers[i](arg);
                    } else {
                        if(subscribers[i] === arg){
                            subscribers.splice(i,1);
                        }
                    }
                }
            }
        };
        //定義一個函數makePublisher()，它接受一個對象作為對象，通過把上述通用發布者的方法復制到該對象中，從而將其轉換為一個發布者
        function makePublisher(o){
            var i;
            for(i in publisher) {
                if(publisher.hasOwnProperty(i) && typeof publisher[i] === "function"){
                    o[i] = publisher[i];
                }
            }
            o.subscribers = {any: []};
        }
        //實現paper對象
        var paper = {
            daily: function(){
                this.publish("big news today");
            },
            monthly: function(){
                this.publish("interesting analysis","monthly");
            }
        };
        //將paper構造成一個發布者
        makePublisher(paper);
        //已經有了一個發布者。看看訂閱對象joe，該對象有兩個方法：
        var joe = {
            drinkCoffee: function(paper) {
                console.log('Just read' + paper);
            },
            sundayPreNap : function(monthly){
                console.log('About to fall asleep reading this' + monthly);
            }
        };
        //paper注冊joe（即joe向paper訂閱）
        paper.subscribe(joe.drinkCoffee);
        paper.subscribe(joe.sundayPreNap,'monthly');
        //即joe為默認“any”事件提供了一個可被調用的方法，而另一個可被調用的方法則用於當“monthly”類型的事件發生時的情況。現在讓我們來觸發一些事件：
        paper.daily();      //Just readbig news today
        paper.daily();      //Just readbig news today
        paper.monthly();    //About to fall asleep reading thisinteresting analysis
        paper.monthly();    //About to fall asleep reading thisinteresting analysis
        paper.monthly();

 

自己又試着實現了一下

    var publisher = {
        subscribers: {
            'any': []
        },
        subscribe: function(fn, type){
            var type = type || 'any';
            if(typeof this.subscribers[type] === 'undefined'){
                this.subscribers[type] = [];
            }
            this.subscribers[type].push(fn);
        },
        unsubscribe: function(fn, type){
            this.visitSubscribers('unsubscribe', fn, type);
        },
        publish: function(publication, type){
            this.visitSubscribers('publish', publication, type);
        },
        visitSubscribers: function(action, arg, type){
            var type = type || 'any';
            if(typeof this.subscribers[type] === 'undefined'){
                this.subscribers[type] = [];
            }
            for(var i=0, len = this.subscribers[type].length; i<len; i++){
                if(action === 'unsubscribe'){
                    if(this.subscribers[type][i] === arg){
                        this.subscribers[type].splice(i,1);
                    }
                } else {
                    this.subscribers[type][i](arg);
                }
            }
        }
    };

    function makePublisher(obj){
        var i;
        for(i in publisher){
            if(publisher.hasOwnProperty(i)  && typeof publisher[i] === 'function'){
                obj[i] = publisher[i];
            }
        }
        obj['subscribers'] = {'any':[]};
    }

    var paper = {
        daily: function(news){
            this.publish(news);
        },
        monthly : function(news){
            this.publish(news, 'monthly');
        }
    }
    makePublisher(paper);

    var Jack = {
        drinkCoffee: function(publication){
            console.log('Jack read '+ publication +' while drinking coffe');
        },
        watchTV : function(publication){
            console.log('Jack read ' + publication + ' while watching TV');
        }
    }
    var Amy = {
        AmyDrinkCoffee: function(publication){
            console.log('Amy read '+ publication +' while drinking coffe');
        },
        AmyWatchTV : function(publication){
            console.log('Amy read ' + publication + ' while watching TV');
        }
    }

    paper.daily();
    paper.monthly();
    paper.subscribe(Jack.drinkCoffee);
    paper.subscribe(Jack.watchTV, 'monthly');                                                           
    paper.subscribe(Amy.AmyDrinkCoffee, 'monthly');
    paper.subscribe(Amy.AmyWatchTV);

    console.log('paper發布daily');
    paper.daily(' today is Sunday ');       //Jack read  today is Sunday  while drink coffe  
                                            //Amy read  today is Sunday  while watch TV 
    console.log('paper發布monthly');
    paper.monthly(' this month is Aug. ');  //Jack read  this month is Aug.  while drink coffe
                                            //Amy read  this month is Aug.  while watch TV
    console.log('Amy取消了monthly的訂閱');

    paper.unsubscribe(Amy.AmyWatchTV);
    paper.daily(' today is Friday ');           //Jack read  today is Friday  while drinking coffe
    paper.monthly(' next weekend is Sept. ');   //Jack read  next weekend is Sept.  while watching TV
                                                //Amy read  next weekend is Sept.  while drinking coffe

 

試着用函數實現：

        function Publisher(subscribers){
            this.subscribers = subscribers || {'any': []};
            Publisher.prototype.subscribe = function(fn, type){
                var type = type || 'any';
                if(typeof this.subscribers[type] === 'undefined'){
                    this.subscribers[type] = [];
                }
                this.subscribers[type].push(fn);
            };
            Publisher.prototype.unsubscribe = function(fn, type){
                var type = type || 'any';
                for(var i=0, len = this.subscribers[type].length;  i<len; i++){
                    if(this.subscribers[type][i] === fn){
                        this.subscribers[type].splice(i,1);
                    }
                }
            };
            Publisher.prototype.publish = function(publication, type){
                var type = type || 'any';
                for(var i=0, len = this.subscribers[type].length; i<len; i++){
                    this.subscribers[type][i](publication);
                }
            };
        }


        var paper = new Publisher();
        paper.daily = function(){
            this.publish(' this is Olympic ! ');
        };
        paper.monthly = function(){
            this.publish(' last month is the 28th Olympic! ', 'monthly');
        };

        var Jack = {
            readInMorning: function(news){
                console.log('Jack reads ' + news + ' in the morning');
            },
            readInSunday: function(news){
                console.log('Jack reads ' + news + ' on Sunday');
            }
        };

        var Amy = {
            readInMorning: function(news){
                console.log('Amy reads ' + news + ' in the morning');
            },
            readInSunday: function(news){
                console.log('Amy reads ' + news + ' on Sunday');
            }
        };

        paper.subscribe(Jack.readInMorning);
        paper.subscribe(Jack.readInSunday, 'monthly');
        paper.subscribe(Amy.readInMorning);
        paper.subscribe(Amy.readInSunday, 'monthly');

        paper.daily();          //Jack reads  this is Olympic !  in the morning
                                //Amy reads  this is Olympic !  in the morning
        paper.monthly();        //Jack reads  last month is the 28th Olympic!  on Sunday
                                //Amy reads  last month is the 28th Olympic!  on Sunday

        paper.unsubscribe(Jack.readInSunday,'monthly');
        paper.daily();              //Jack reads  this is Olympic !  in the morning
                                    //Amy reads  this is Olympic !  in the morning
        paper.monthly();            //Amy reads  last month is the 28th Olympic!  on Sunday