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 相关文章推荐
EditPlus注册码生成器(js代码实现)
Mar 25 Javascript
JS实现随机数生成算法示例代码
Aug 08 Javascript
javascript 面向对象封装与继承
Nov 27 Javascript
node.js中的fs.openSync方法使用说明
Dec 17 Javascript
jQuery+Pdo编写login登陆界面
Aug 01 Javascript
js生成随机数方法和实例
Jan 17 Javascript
js实现本地时间同步功能
Aug 26 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
Nov 06 Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
Apr 02 Javascript
微信小程序仿通讯录功能
Apr 09 Javascript
JS新手入门数组处理的实用方法汇总
Apr 07 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
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
成为好程序员必须避免的5个坏习惯
2014/07/04 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
Array, Array Constructor, for in loop, typeof, instanceOf
2011/09/13 Javascript
javascript教程之不完整的继承(js原型链)
2014/01/13 Javascript
js点击文本框弹出可选择的checkbox复选框
2016/02/03 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
2016/03/08 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
jQuery中的AjaxSubmit使用讲解
2016/09/25 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
2017/06/13 jQuery
微信小程序实现团购或秒杀批量倒计时
2020/11/01 Javascript
ES6入门教程之Array.from()方法
2019/03/23 Javascript
VUE兄弟组件传值操作实例分析
2019/10/26 Javascript
js实现批量删除功能
2020/08/27 Javascript
Python selenium文件上传方法汇总
2020/11/19 Python
分享一下如何编写高效且优雅的 Python 代码
2017/09/07 Python
python3.7实现云之讯、聚合短信平台的短信发送功能
2019/09/26 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
用python实现一个简单的验证码
2020/12/09 Python
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
印度服装购物网站:Limeroad
2018/09/26 全球购物
2014年语文教学工作总结
2014/12/17 职场文书
本科毕业论文导师评语
2014/12/31 职场文书
五年级下册复习计划
2015/01/19 职场文书
休假证明书
2015/06/24 职场文书
订货会主持词
2015/07/01 职场文书
高三毕业感言
2015/07/30 职场文书
教师教育心得体会
2016/01/19 职场文书
导游词之广州陈家祠
2019/10/21 职场文书
PHP实现两种排课方式
2021/06/26 PHP
python创建字典及相关管理操作
2022/04/13 Python
基于Python实现nc批量转tif格式
2022/08/14 Python