Javascript模式实例 - 观察者模式

首先我们看看观察者的概念

观察者模式：定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时, 所有依赖于它的对象都得到通知并被自动更新。 

在园里有许多牛人都已经写过这些文章，不过大多的例子都是.NET，今天我要举一个JS的使用实例．有兴趣的朋友可以先了解一下一些牛人的，比如李会军大哥设计模式篇中观察者的那一节

http://www.cnblogs.com/Terrylee/archive/2006/10/23/Observer_Pattern.html

说说我自己对这模式的理解，其思想核心是：每个被观察对象都依据对象数据的改变而改变，被观察对象一定要有同样的改变行为来约束，这个约束是被观察对象提供给观察器的统一接口。观察器会开发改变数据的行为。

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

观察者实例
 1var ObserverObj = {  /**//*依赖对象*/
 2    FirstName: "Max",
 3    LastName: "Gan",
 4    Id: 1
 5}
 6
 7var ObserverManager = { /**//*观察器*/
 8    Observers:[], /**//*观察对象集*/
 9    AddObserver: function(item){/**//*加入观察对象*/
10        this.Observers.push(item);
11    },
12    Change: function(obj){  /**//*改变对象行为*/
13        for(var item in obj){
14            ObserverObj[item] = obj[item];
15        }//改变数据依赖对象数据
16        for(var i = 0,len = this.Observers.length; i < len; i++){
17            var item = this.Observers[i];
18            item.Display();        //对象改变后，改变观察对象的行为Display; 为统一的接口
19        }
20    }
21}
22
23var Header = function(){    /**//*观察对象Header*/
24    this.Display = function(){
25        alert(ObserverObj.FirstName);
26    }
27}
28
29var Content = function(){    /**//*观察对象Content*/
30    this.Display = function(){
31        alert(ObserverObj.LastName);
32    }
33}
34
35var Foot = function(){    /**//*观察对象Foot*/
36    this.Display = function(){
37        alert(ObserverObj.Id);
38    }
39}

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

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

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

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

我把整个例子都附上了，有兴趣的朋友可以下载来看看．

/Files/Max-Gan/Javascript观察者模式.rar 

转载于:https://www.cnblogs.com/Max-Gan/archive/2009/10/24/1589006.html