DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> Javascript觀察者模式
Javascript觀察者模式
編輯: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 Hovertree 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");
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved