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 全角转换实现代码
Jul 17 Javascript
js 面向对象的技术创建高级 Web 应用程序
Feb 25 Javascript
jQuery Tools Dateinput使用介绍
Jul 14 Javascript
jquery实现盒子下拉效果示例代码
Sep 12 Javascript
js替代copy(示例代码)
Nov 27 Javascript
基于iframe实现类似于ajax的页面无刷新
May 31 Javascript
javascript滚轮事件基础实例讲解(37)
Feb 14 Javascript
Angular2安装angular-cli
May 21 Javascript
Vue页面骨架屏注入方法
May 13 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 Javascript
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
js面向对象封装级联下拉菜单列表的实现步骤
Feb 08 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中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
PHP连接MYSQL数据库实例代码
2016/01/20 PHP
javascript错误的认识不用关心内存管理
2012/12/15 Javascript
基于JQuery 滑动与动画的说明介绍
2013/04/18 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
2013/07/02 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
javascript定义类和类的实现实例详解
2015/12/01 Javascript
Javascript实现的SHA-256加密算法完整实例
2016/02/02 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
2016/05/25 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
js数组操作方法总结(必看篇)
2016/11/22 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
MVVM 双向绑定的实现代码
2018/06/21 Javascript
基于React+Redux的SSR实现方法
2018/07/03 Javascript
微信小程序开发实现的IP地址查询功能示例
2019/03/28 Javascript
微信小程序Page中data数据操作和函数调用方法
2019/05/08 Javascript
使用Typescript和ES模块发布Node模块的方法
2020/05/25 Javascript
Vue的自定义组件不能使用click方法的解决
2020/07/28 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
python的三目运算符和not in运算符使用示例
2014/03/03 Python
python格式化字符串实例总结
2014/09/28 Python
详细解析Python中的变量的数据类型
2015/05/13 Python
Python+Turtle动态绘制一棵树实例分享
2018/01/16 Python
对python numpy数组中冒号的使用方法详解
2018/04/17 Python
python制作朋友圈九宫格图片
2019/11/03 Python
pytorch: Parameter 的数据结构实例
2019/12/31 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
2016/03/21 HTML / CSS
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
班级学习计划书
2014/04/27 职场文书
搭讪开场白台词大全
2015/05/28 职场文书
辩论会主持词
2015/07/03 职场文书
高中英语教学反思范文
2016/03/02 职场文书