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 相关文章推荐
深入理解JavaScript系列(13) This? Yes,this!
Jan 18 Javascript
解析URI与URL之间的区别与联系
Nov 22 Javascript
js判断页面中是否有指定控件的简单实例
Mar 04 Javascript
处理文本部分内容的TextRange对象应用实例
Jul 29 Javascript
ExpressJS入门实例
Jan 14 Javascript
JQuery中基础过滤选择器用法实例分析
May 18 Javascript
javascript实现跨域的方法汇总
Jun 25 Javascript
jquery实现图片上传前本地预览功能
May 10 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
Nov 03 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
vue+Element实现搜索关键字高亮功能
May 28 Javascript
小程序实现密码输入框
Nov 16 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
全国FM电台频率大全 - 27 陕西省
2020/03/11 无线电
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
Laravel学习教程之路由模块
2017/08/18 PHP
PHP调用其他文件中的类
2018/04/02 PHP
ThinkPHP3.2.3框架实现的空模块、空控制器、空操作,跳转到错误404页面图文详解
2019/04/03 PHP
JavaScript 字符串与数组转换函数[不用split与join]
2009/12/13 Javascript
关于JavaScript的with 语句的使用方法
2011/05/09 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
防止文件缓存的js代码
2013/01/10 Javascript
JavaScript的setAttribute兼容性问题解决方法
2013/11/11 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
2014/06/16 Javascript
使用正则表达式的格式化与高亮显示json字符串
2014/12/03 Javascript
深入分析JSONP跨域的原理
2014/12/10 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
jQuery移动web开发中的页面初始化与加载事件
2015/12/03 Javascript
AngularJS 使用$sce控制代码安全检查
2016/01/05 Javascript
javascript中的3种继承实现方法
2016/01/27 Javascript
json对象及数组键值的深度大小写转换问题详解
2018/03/30 Javascript
layer弹出子iframe层父子页面传值的实现方法
2018/11/22 Javascript
vue + elementUI实现省市县三级联动的方法示例
2019/10/29 Javascript
在博客园博文中添加自定义右键菜单的方法详解
2020/02/05 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
[01:18]PWL开团时刻DAY10——一拳超人
2020/11/11 DOTA
python实现复制整个目录的方法
2015/05/12 Python
python删除列表内容
2015/08/04 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
python网络编程之多线程同时接受和发送
2019/09/03 Python
详解python statistics模块及函数用法
2019/10/27 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
德国孕妇装和婴童服装网上商店:bellybutton
2018/04/12 全球购物
班长自荐书范文
2014/02/11 职场文书
工作粗心大意检讨书
2014/09/18 职场文书
2015年六一儿童节演讲稿
2015/03/19 职场文书
公司财务部岗位职责
2015/04/14 职场文书
postgres之jsonb属性的使用操作
2021/06/23 PostgreSQL
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript