Javascript 模式实例 观察者模式


Posted in Javascript onOctober 24, 2009

在园里有许多牛人都已经写过这些文章,不过大多的例子都是.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
一个人能够走多远,取决于与谁同行
Javascript 相关文章推荐
js弹窗代码 可以指定弹出间隔
Jul 03 Javascript
jquery 图片轮换效果
Jul 29 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
Aug 06 Javascript
实例讲解js验证表单项是否为空的方法
Jan 09 Javascript
Javascript获取background属性中url的值
Oct 17 Javascript
微信小程序报错:this.setData is not a function的解决办法
Sep 27 Javascript
在vue项目中引用Iview的方法
Sep 14 Javascript
基于Vue 服务端Cookies删除的问题
Sep 21 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
May 29 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
May 06 Javascript
小程序实现上传视频功能
Aug 18 Javascript
Jquery 弹出层插件实现代码
Oct 24 #Javascript
js 操作符实例代码
Oct 24 #Javascript
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
Oct 24 #Javascript
JS window.opener返回父页面的应用
Oct 24 #Javascript
JavaScript 动态添加表格行 使用模板、标记
Oct 24 #Javascript
javascript Keycode对照表
Oct 24 #Javascript
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 #Javascript
You might like
在PHP的图形函数中显示汉字
2006/10/09 PHP
聊天室php&amp;mysql(三)
2006/10/09 PHP
用PHP实现将GB编码转换为UTF8
2006/11/25 PHP
浅析get与post的一些特殊情况
2014/07/28 PHP
你应该知道PHP浮点数知识
2015/05/13 PHP
深入理解PHP中的count函数
2016/05/31 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
破解Session cookie的方法
2006/07/28 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
2013/07/31 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
2015/05/09 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
2016/04/01 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
2017/08/04 Javascript
jQuery:unbind方法的使用详解
2017/08/14 jQuery
Vue中定义全局变量与常量的各种方式详解
2017/08/23 Javascript
vue微信分享 vue实现当前页面分享其他页面
2017/12/02 Javascript
浅谈Angular HttpClient简单入门
2018/05/04 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
ajax与jsonp的区别及用法
2018/10/16 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
[45:16]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第一场 12.12
2020/12/16 DOTA
python类继承用法实例分析
2014/10/10 Python
numpy.linspace 生成等差数组的方法
2018/07/02 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
python 浮点数四舍五入需要注意的地方
2020/08/18 Python
压铸汽车模型收藏家:Diecastmodelswholesale.com
2016/12/21 全球购物
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
英国在线女鞋目的地:SIMMI
2018/12/27 全球购物
ABOUT YOU罗马尼亚:超过600个时尚品牌
2019/09/19 全球购物
意大利折扣和优惠券网站:Groupalia
2019/10/09 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?用contains来区分是否有重复的对象。还是都不用
2013/07/30 面试题
北京华建集团SQL面试题
2014/06/03 面试题
信访维稳承诺书
2015/05/04 职场文书
2016年离婚协议书范文
2016/03/18 职场文书