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 相关文章推荐
Prototype RegExp对象 学习
Jul 19 Javascript
jquery控制左右箭头滚动图片列表的实例
May 20 Javascript
jQuery CSS()方法改变现有的CSS样式
Aug 20 Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 Javascript
js实现移动端编辑添加地址【模仿京东】
Apr 28 Javascript
AngularJS ionic手势事件的使用总结
Aug 09 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
Sep 19 Javascript
实例教学如何写vue插件
Nov 30 Javascript
详解vue中的computed的this指向问题
Dec 05 Javascript
微信提示 在浏览器打开 效果实现过程解析
Sep 10 Javascript
详解JavaScript原型与原型链
Nov 16 Javascript
前端实现滑动按钮AJAX与后端交互的示例代码
Feb 24 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加密解密函数分享
2014/06/05 PHP
百度实时推送api接口应用示例
2014/10/21 PHP
Fleaphp常见函数功能与用法示例
2016/11/15 PHP
php框架CodeIgniter主从数据库配置方法分析
2018/05/25 PHP
jQuery动画animate方法使用介绍
2013/05/06 Javascript
Javascript事件实例详解
2013/11/06 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
jquery实现的鼠标下拉滚动置顶效果
2014/07/24 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
遍历json获得数据的几种方法小结
2017/01/21 Javascript
boostrapTable的refresh和refreshOptions区别浅析
2017/01/22 Javascript
JS实现图片点击后出现模态框效果
2017/05/03 Javascript
新手如何快速理解js异步编程
2019/06/24 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
2020/02/15 Javascript
JavaScript Image对象实现原理实例解析
2020/08/26 Javascript
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
[04:14]从西雅图到上海——玩家自制DOTA2主题歌曲应援TI9
2019/07/11 DOTA
python 装饰器功能以及函数参数使用介绍
2012/01/27 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
python爬虫 Pyppeteer使用方法解析
2019/09/28 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
解决Pytorch自定义层出现多Variable共享内存错误问题
2020/06/28 Python
python批量修改文件名的示例
2020/09/27 Python
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
校园广播稿精选
2014/10/01 职场文书
2016幼儿园毕业感言
2015/12/08 职场文书
go mod 安装依赖 unkown revision问题的解决方案
2021/05/06 Golang
深入理解go缓存库freecache的使用
2022/02/15 Golang
Python经常使用的一些内置函数
2022/04/11 Python