快捷導(dǎo)航

Javascript 模式實(shí)例觀察者模式

更新時(shí)間：2009年10月24日 12:07:13 作者：

首先我們看看觀察者的概念觀察者模式：定義對(duì)象間的一種一對(duì)多的依賴關(guān)系,當(dāng)一個(gè)對(duì)象的狀態(tài)發(fā)生改變時(shí), 所有依賴于它的對(duì)象都得到通知并被自動(dòng)更新。

在園里有許多牛人都已經(jīng)寫過這些文章，不過大多的例子都是.NET，今天我要舉一個(gè)JS的使用實(shí)例．有興趣的朋友可以先了解一下一些牛人的，比如李會(huì)軍大哥設(shè)計(jì)模式篇中觀察者的那一節(jié)
http://www.cnblogs.com/Terrylee/archive/2006/10/23/Observer_Pattern.html
說說我自己對(duì)這模式的理解，其思想核心是：每個(gè)被觀察對(duì)象都依據(jù)對(duì)象數(shù)據(jù)的改變而改變，被觀察對(duì)象一定要有同樣的改變行為來約束，這個(gè)約束是被觀察對(duì)象提供給觀察器的統(tǒng)一接口。觀察器會(huì)開發(fā)改變數(shù)據(jù)的行為。

JS是弱類型的腳本，很多東西都要約定的，不象.NET會(huì)有接口的約束，廢話不多說，我們直接看實(shí)例：
觀察者實(shí)例

復(fù)制代碼代碼如下:

 
var ObserverObj = { /**//*依賴對(duì)象*/ 
FirstName: "Max", 
LastName: "Gan", 
Id: 1 
} 
var ObserverManager = { /**//*觀察器*/ 
Observers:[], /**//*觀察對(duì)象集*/ 
AddObserver: function(item){/**//*加入觀察對(duì)象*/ 
this.Observers.push(item); 
}, 
Change: function(obj){ /**//*改變對(duì)象行為*/ 
for(var item in obj){ 
ObserverObj[item] = obj[item]; 
}//改變數(shù)據(jù)依賴對(duì)象數(shù)據(jù) 
for(var i = 0,len = this.Observers.length; i < len; i++){ 
var item = this.Observers[i]; 
item.Display(); //對(duì)象改變后，改變觀察對(duì)象的行為Display; 為統(tǒng)一的接口 
} 
} 
} 
var Header = function(){ /**//*觀察對(duì)象Header*/ 
this.Display = function(){ 
alert(ObserverObj.FirstName); 
} 
} 
var Content = function(){ /**//*觀察對(duì)象Content*/ 
this.Display = function(){ 
alert(ObserverObj.LastName); 
} 
} 
var Foot = function(){ /**//*觀察對(duì)象Foot*/ 
this.Display = function(){ 
alert(ObserverObj.Id); 
} 
} 

上面的例子ObserverManager只提供了綁定的方法（AddObserver），其他的什么取消綁定啊之類的代碼技巧，可能大家想一下就知道了．其實(shí)這些代碼的最終目的就是當(dāng)改變了Observers數(shù)據(jù)，其他的被對(duì)象也會(huì)根據(jù)數(shù)據(jù)的改變作出相應(yīng)的回應(yīng)．OK，現(xiàn)在我們把他們綁定一下．

復(fù)制代碼代碼如下:

 
/***綁定觀察器動(dòng)作***/ 
ObserverManager.AddObserver(new Header()); 
ObserverManager.AddObserver(new Content()); 
ObserverManager.AddObserver(new Foot()); 

最后我們使用會(huì)怎么使用呢？（一個(gè)低能的問題．．．呵呵）看例子.
使用方法

復(fù)制代碼代碼如下:

 
<!--使用方法--> 
<a href="javascript://" onclick="ObserverManager.Change({FirstName:'老婆'});">改變FirstName</a> 
<a href="javascript://" onclick="ObserverManager.Change({LastName:'是母老虎'});">改變LastName</a> 
<a href="javascript://" onclick="ObserverManager.Change({Id:2});">改變Id</a> 

我把整個(gè)例子都附上了，有興趣的朋友可以下載來看看．
Javascript觀察者模式.rar
一個(gè)人能夠走多遠(yuǎn),取決于與誰同行

您可能感興趣的文章: