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调用WebService的示例
Apr 07 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
Jan 16 Javascript
IE中的File域无法清空使用jQuery重设File域
Apr 24 Javascript
关于JS变量和作用域详解
Jul 28 Javascript
vue.js指令v-for使用及索引获取
Nov 03 Javascript
JS日程管理插件FullCalendar中文说明文档
Feb 06 Javascript
js/jq仿window文件夹框选操作插件
Mar 08 Javascript
使用vue for时为什么要key【推荐】
Jul 11 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 Javascript
JavaScript如何判断input数据类型
Feb 06 Javascript
正则表达式基础与常用验证表达式
Jun 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
PHP安装攻略:常见问题解答(二)
2006/10/09 PHP
php格式化金额函数分享
2015/02/02 PHP
PHP开发实现快递查询功能详解
2019/04/08 PHP
Laravel框架自定义分页样式操作示例
2020/01/26 PHP
js 操作select相关方法函数
2009/12/06 Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
2012/05/13 Javascript
JavaScript中的私有/静态属性介绍
2012/07/26 Javascript
JS 退出系统并跳转到登录界面的实现代码
2013/06/29 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
javascript教程:关于if简写语句优化的方法
2014/05/17 Javascript
JS实现根据当前文字选择返回被选中的文字
2014/05/21 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
js实现的在线调色板功能完整实例
2016/12/21 Javascript
AngularJS读取JSON及XML文件的方法示例
2017/05/25 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
vue打包相关细节整理(小结)
2018/09/28 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
2020/02/28 Javascript
[02:40]DOTA2英雄基础教程 炼金术士
2013/12/23 DOTA
python 域名分析工具实现代码
2009/07/15 Python
django之常用命令详解
2016/06/30 Python
简单的python后台管理程序
2017/04/13 Python
详解python 模拟豆瓣登录(豆瓣6.0)
2019/04/18 Python
快速查找Python安装路径方法
2020/02/06 Python
详解如何在css3打包后自动追加前缀插件:autoprefixer
2018/12/18 HTML / CSS
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
linux面试相关问题
2013/04/28 面试题
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
优秀士兵个人事迹材料
2014/01/19 职场文书
竞争与合作演讲稿
2014/05/12 职场文书
2015年数学教研组工作总结
2015/05/23 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
狂人日记读书笔记
2015/06/30 职场文书
初一数学教学反思
2016/02/17 职场文书
《圆的面积》教学反思
2016/02/19 职场文书
pandas进行数据输入和输出的方法详解
2022/03/23 Python
Android中的Launch Mode详情
2022/06/05 Java/Android