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 相关文章推荐
js动态给table添加/删除tr的方法
Aug 02 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
Sep 01 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
JavaScript中Array对象用法实例总结
Nov 29 Javascript
jquery插件bootstrapValidator表单验证详解
Dec 15 Javascript
基于bootstrap的选择框插件icheck
Dec 23 Javascript
Angular2使用Angular CLI快速搭建工程(一)
May 21 Javascript
动态创建Angular组件实现popup弹窗功能
Sep 15 Javascript
简单实现jQuery弹窗效果
Oct 30 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
手把手教你vue-cli单页到多页应用的方法
May 31 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
Feb 13 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
跟我学Laravel之请求与输入
2014/10/15 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
用javascript实现无刷新更新数据的详细步骤 asp
2006/12/26 Javascript
JQuery 1.4 中的Ajax问题
2010/01/23 Javascript
javascript对数组的常用操作代码 数组方法总汇
2011/01/27 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
分享15个大家都熟知的jquery小技巧
2015/12/02 Javascript
Jquery实现的简单轮播效果【附实例】
2016/04/19 Javascript
JavaScript仿flash遮罩动画效果
2016/06/15 Javascript
微信小程序 wxapp视图容器 view详解
2016/10/31 Javascript
基于AGS JS开发自定义贴图图层
2017/03/31 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
2017/07/19 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
2019/09/27 Javascript
Vue切换div显示隐藏,多选,单选代码解析
2020/07/14 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
python 打印出所有的对象/模块的属性(实例代码)
2016/09/11 Python
Python3.5 创建文件的简单实例
2018/04/26 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
python超时重新请求解决方案
2019/10/21 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
2014/08/19 HTML / CSS
CSS Grid布局教程之网格单元格布局
2014/12/30 HTML / CSS
新西兰领先的内衣店:Bendon Lingerie新西兰
2018/07/11 全球购物
可以在一个PHP文件里面include另外一个PHP文件两次吗
2015/05/22 面试题
本科生学习总结的自我评价
2013/10/02 职场文书
面料业务员岗位职责
2013/12/26 职场文书
机工车间主任岗位职责
2014/03/05 职场文书
天网工程实施方案
2014/03/26 职场文书
质量提升方案
2014/06/16 职场文书
企业领导对照检查材料
2014/08/20 职场文书
英文感谢信格式
2015/01/21 职场文书