观察者模式(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");
今天就先到这里吧,明天我将会使用观察者模型来实现简单的双向绑定。