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代码
Mar 16 Javascript
jquery获取tagName再进行判断
May 29 Javascript
DOM基础教程之使用DOM控制表格
Jan 20 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
Dec 08 Javascript
举例说明JavaScript中的实例对象与原型对象
Mar 11 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
Jul 07 Javascript
js学习之----深入理解闭包
Nov 21 Javascript
利用Node.js对文件进行重命名
Mar 12 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
Nov 22 Javascript
如何基于js判断浏览器版本
Feb 20 Javascript
vue项目,代码提交至码云,iconfont的用法说明
Jul 30 Javascript
javascript实现电商放大镜效果
Nov 23 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中的Trait 特性及作用
2016/04/03 PHP
javascript 验证日期的函数
2010/03/18 Javascript
浅析javascript闭包 实例分析
2010/12/25 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
2011/01/09 Javascript
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
用javascript作一个通用向导说明
2011/08/30 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
JavaScript之underscore_动力节点Java学院整理
2017/07/03 Javascript
Angular路由ui-router配置详解
2018/08/01 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
layui-select动态选中值的例子
2019/09/23 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
2019/10/16 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
玩转python爬虫之cookie使用方法
2016/02/17 Python
[原创]使用豆瓣提供的国内pypi源
2017/07/02 Python
python爬虫超时的处理的实例
2018/12/19 Python
python实现画出e指数函数的图像
2019/11/21 Python
scrapy爬虫:scrapy.FormRequest中formdata参数详解
2020/04/30 Python
CSS3 选择器 属性选择器介绍
2012/01/21 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
美津浓美国官网:Mizuno美国
2018/08/07 全球购物
Ajxa常见问题都有哪些
2014/03/26 面试题
关键字throw与throws的用法差异
2016/11/22 面试题
党校培训思想汇报
2013/12/30 职场文书
环境工程专业自荐信
2014/03/03 职场文书
品牌推广策划方案
2014/05/28 职场文书
幼儿园国庆节活动总结
2015/03/23 职场文书
保研导师推荐信
2015/03/25 职场文书
2015安全保卫工作总结
2015/04/25 职场文书
民事起诉状范文
2015/05/19 职场文书
暑期工社会实践报告
2015/07/13 职场文书
党风廉洁教育心得体会
2016/01/20 职场文书
Pytorch实现图像识别之数字识别(附详细注释)
2021/05/11 Python
详解CSS不受控制的position fixed
2021/05/25 HTML / CSS
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android