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");  

 　　

　　今天就先到这里吧，明天我将会使用观察者模型来实现简单的双向绑定。