Javascript 模式实例 观察者模式
Javascript 模式实例 观察者模式
发布时间:2016-12-30 来源:查字典编辑
摘要:在园里有许多牛人都已经写过这些文章,不过大多的例子都是.NET,今天我要举一个JS的使用实例.有兴趣的朋友可以先了解一下一些牛人的,比如李会...

在园里有许多牛人都已经写过这些文章,不过大多的例子都是.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://">改变FirstName</a>

<a href="javascript://">改变LastName</a>

<a href="javascript://">改变Id</a>

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

Javascript观察者模式.rar

一个人能够走多远,取决于与谁同行

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类