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 相关文章推荐
图片onload事件触发问题解决方法
Jul 31 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
Aug 17 Javascript
javaScript 计算两个日期的天数相差(示例代码)
Dec 27 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
Jun 03 Javascript
详解javascript遍历方式
Nov 11 Javascript
AngularJS中$watch和$timeout的使用示例
Sep 20 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
Oct 09 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
jQuery实现弹幕效果
Feb 17 Javascript
three.js绘制地球、飞机与轨迹的效果示例
Feb 28 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
Mar 02 Javascript
Vue infinite update loop的问题解决
Apr 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 获取当前访问的url文件名的方法小结
2010/02/08 PHP
php邮件发送,php发送邮件的类
2011/03/24 PHP
纯PHP生成的一个树叶图片画图例子
2014/04/16 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(九)
2014/06/24 PHP
分享PHP计算两个日期相差天数的代码
2015/12/23 PHP
PHP判断FORM表单或URL参数来的数据是否为整数的方法
2016/03/25 PHP
thinkPHP5.0框架独立配置与动态配置方法
2017/03/17 PHP
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
2010/03/23 Javascript
JS限制Textarea文本域字符个数的具体实现
2013/08/02 Javascript
javascript函数作用域学习示例(js作用域)
2014/01/13 Javascript
jQuery中live()方法用法实例
2015/01/19 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
AngularJs bootstrap搭载前台框架——基础页面
2016/09/01 Javascript
JS实现的表头列头固定页面功能示例
2017/01/10 Javascript
JavaScript实现替换字符串中最后一个字符的方法
2017/03/07 Javascript
vue 动态修改a标签的样式的方法
2018/01/18 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
微信小程序接入腾讯云验证码的方法步骤
2020/01/07 Javascript
使用Vue实现简单计算器
2020/02/25 Javascript
JavaScript实现串行请求的示例代码
2020/09/14 Javascript
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python3.2模拟实现webqq登录
2016/02/15 Python
python 实现语音聊天机器人的示例代码
2018/12/02 Python
Python3+PyInstall+Sciter解决报错缺少dll、html等文件问题
2019/07/15 Python
Django用户认证系统 User对象解析
2019/08/02 Python
python实现飞行棋游戏
2020/02/05 Python
NIHAOMARKET官方海外旗舰店:意大利你好华人超市
2018/01/27 全球购物
爱尔兰领先的在线体育用品零售商:theGAAstore
2018/04/16 全球购物
英国最大的滑板品牌选择:Route One
2019/09/22 全球购物
UNIX特点都有哪些
2016/04/05 面试题
小孩百日宴答谢词
2014/01/15 职场文书
2014年机关植树节活动方案
2014/02/27 职场文书
企业年会主持词
2014/03/27 职场文书
2014年学生会工作总结
2014/11/07 职场文书
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle