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 相关文章推荐
网页中实现浏览器的最大,最小化和关闭按钮
Mar 12 Javascript
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
May 30 Javascript
javascript 文件的同步加载与异步加载实现原理
Dec 13 Javascript
JavaScript分页功能的实现方法
Apr 25 Javascript
动态创建Angular组件实现popup弹窗功能
Sep 15 Javascript
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
JS实现简易换图时钟功能分析
Jan 04 Javascript
vue点击当前路由高亮小案例
Sep 26 Javascript
JS面向对象实现飞机大战
Aug 26 Javascript
Flexible.js可伸缩布局实现方法详解
Nov 13 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
Vue图片裁剪组件实例代码
Jul 02 Vue.js
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.MVC的模板标签系统(二)
2006/09/05 PHP
php伪静态之APACHE篇
2014/06/02 PHP
PHP的mysqli_ssl_set()函数讲解
2019/01/23 PHP
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
利用js读取动态网站从服务器端返回的数据
2014/02/10 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
详解JavaScript中的客户端消息框架设计原理
2015/06/24 Javascript
javascript常用经典算法实例详解
2015/11/25 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
利用JS实现数字增长
2016/07/28 Javascript
使用 bootstrap modal遇到的问题小结
2016/11/09 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
2016/12/30 Javascript
JS实现iframe自适应高度的方法示例
2017/01/07 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
详解Vue.directive 自定义指令
2019/03/27 Javascript
Element Input输入框的使用方法
2020/07/26 Javascript
Vue 实例中使用$refs的注意事项
2021/01/29 Vue.js
[49:21]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第二场 11.05
2020/11/06 DOTA
python数据结构之链表的实例讲解
2017/07/25 Python
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
通过Python实现一个简单的html页面
2020/05/16 Python
Pandas把dataframe或series转换成list的方法
2020/06/14 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
Snapfish爱尔兰:在线照片打印和个性化照片礼品
2018/09/17 全球购物
高校教师岗位职责
2014/03/18 职场文书
含预算的公司户外活动方案
2014/08/16 职场文书
标准离婚协议书(2014版)
2014/10/05 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
教师群众路线心得体会
2014/11/04 职场文书
2015年世界粮食日演讲稿
2015/03/20 职场文书
2015年乡镇工作总结范文
2015/04/22 职场文书
聊一聊python常用的编程模块
2021/05/14 Python
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS