Javascript 模式实例观察者模式

169 阅读 0 评论 112 点赞

我是靠谱客的博主负责毛豆，最近开发中收集的这篇文章主要介绍Javascript 模式实例观察者模式，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在园里有许多牛人都已经写过这些文章，不过大多的例子都是.NET，今天我要举一个JS的使用实例．有兴趣的朋友可以先了解一下一些牛人的，比如李会军大哥设计模式篇中观察者的那一节
http://www.cnblogs.com/Terrylee/archive/2006/10/23/Observer_Pattern.html
说说我自己对这模式的理解，其思想核心是：每个被观察对象都依据对象数据的改变而改变，被观察对象一定要有同样的改变行为来约束，这个约束是被观察对象提供给观察器的统一接口。观察器会开发改变数据的行为。

JS是弱类型的脚本，很多东西都要约定的，不象.NET会有接口的约束，废话不多说，我们直接看实例：
观察者实例

复制代码代码如下:

 
var ObserverObj = { /**//*依赖对象*/ 
FirstName: "Max", 
LastName: "Gan", 
Id: 1 
} 
var ObserverManager = { /**//*观察器*/ 
Observers:[], /**//*观察对象集*/ 
AddObserver: function(item){/**//*加入观察对象*/ 
this.Observers.push(item); 
}, 
Change: function(obj){ /**//*改变对象行为*/ 
for(var item in obj){ 
ObserverObj[item] = obj[item]; 
}//改变数据依赖对象数据 
for(var i = 0,len = this.Observers.length; i < len; i++){ 
var item = this.Observers[i]; 
item.Display(); //对象改变后，改变观察对象的行为Display; 为统一的接口 
} 
} 
} 
var Header = function(){ /**//*观察对象Header*/ 
this.Display = function(){ 
alert(ObserverObj.FirstName); 
} 
} 
var Content = function(){ /**//*观察对象Content*/ 
this.Display = function(){ 
alert(ObserverObj.LastName); 
} 
} 
var Foot = function(){ /**//*观察对象Foot*/ 
this.Display = function(){ 
alert(ObserverObj.Id); 
} 
} 

上面的例子ObserverManager只提供了绑定的方法（AddObserver），其他的什么取消绑定啊之类的代码技巧，可能大家想一下就知道了．其实这些代码的最终目的就是当改变了Observers数据，其他的被对象也会根据数据的改变作出相应的回应．OK，现在我们把他们绑定一下．

复制代码代码如下:

 
/***绑定观察器动作***/ 
ObserverManager.AddObserver(new Header()); 
ObserverManager.AddObserver(new Content()); 
ObserverManager.AddObserver(new Foot()); 

最后我们使用会怎么使用呢？（一个低能的问题．．．呵呵）看例子.
使用方法

复制代码代码如下:

 
<!--使用方法--> 
<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> 

我把整个例子都附上了，有兴趣的朋友可以下载来看看．
Javascript观察者模式.rar
一个人能够走多远,取决于与谁同行