Javascript觀察者模式

　　觀察者模式（Observer Pattern），也被稱為“發布/訂閱模型（publisher/subscriber model）”。在這種模式中，有兩類對象，分別是“觀察者-Observer”和“目標對象-Subject”。目標對象中保存着一份觀察者的列表，當目標對象的狀態發生改變的時候就主動向觀察者發出通知（調用觀察者提供的方法），從而建立一種發布/訂閱的關系。

1.DOM中的觀察者模式

　　JavaScript是一個事件驅動型語言，觀察者模式可謂隨處可見，例如常用的一些onclick、 attachEvent 、addEventListener 都是觀察者模式的具體應用。

document.body.onclick = function(){
    alert('我是一個觀察者，你一點擊，我就知道了');
}
document.body.addEventListener('click',function(){
    alert('我也是一個觀察者，你一點擊，我就知道了');
});

　　其中，body是發布者，即目標對象，當被點擊的時候，向觀察者反饋這一事件；JavaScript中函數也是一個對象，click這個事件的處理函數（alert('...')）就是觀察者，當接收到目標對象反饋來的信息時進行一定處理。

　　這個例子中的發布/訂閱關系是由JavaScript語言本身實現的，DOM的每個節點都可以作為Subject，提供了很多事件處理(Event handle)的接口，你只需要給這些接口添加監聽函數（也就是Observer），就可以捕獲觸發的事件進行處理。

 

2.自定義的對象上實現觀察者模式

　　對於DOM的事件操作我們直接使用實現好的就行，但是對於自己實現的對象，就需要自己實現發布/訂閱模型了。

/**
 * Created by tsy on 2015/12/25.
 */
var ObseverPattern=function(){

    var observerPattern={
        callbacks:{}，

        //增加觀察者
        addObserver:function(mes,callback,observer){
            this.callbacks[mes]=this.callbacks[mes]||[];
            this.callbacks[mes].push({
                scope:observer||this,
                callback:callback
            })
        }

        //通知事件所有觀察者
        publishObserver:function(mes,datas){
            this.callbacks[msg] = this.callbacks[msg] || [];
            for (var i = 0,len = this.callbacks[msg].length; i < len; i++) {
                this.callbacks[msg][i].apply(this.callbacks[mes][scope],datas||[]);
            }
        }

        //刪除某個觀察者
        removeObserver:function(mes,observer){
            if(!this.callbacks[mes]) return;
            this.callbacks[mes]=this.callbacks[mes].filter(function(item,index,arr){
                return item!=observer;
            });
        }
    }

}

var writer = new ObseverPattern();
var reader = {
    read: function(){alert("我讀了這本新書")}
};
writer.addObserver("newbook", function(){this.read()},reader);
writer.publishObserver("newbook");  

 　　

　　今天就先到這里吧，明天我將會使用觀察者模型來實現簡單的雙向綁定。