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 相关文章推荐
jQuery选择器简明总结(含用法实例,一目了然)
Apr 25 Javascript
jQuery.prop() 使用详解
Jul 19 Javascript
Bootstrap开发实战之响应式轮播图
Jun 02 Javascript
jquery实现页面加载效果
Feb 21 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 Javascript
微信小程序用户信息encryptedData详解
Aug 24 Javascript
详解50行代码,Node爬虫练手项目
Apr 22 Javascript
详解VUE项目中安装和使用vant组件
Apr 28 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 28 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
Oct 30 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
Aug 04 Javascript
Openlayers实现点闪烁扩散效果
Sep 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中$this和$that指针使用实例
2015/01/06 PHP
PHP7正式版测试,性能惊艳!
2015/12/08 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
PHP设计模式之模板方法模式实例浅析
2018/12/20 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
用JS剩余字数计算的代码
2008/07/03 Javascript
理解Javascript_08_函数对象
2010/10/15 Javascript
javascript验证身份证完全方法具体实现
2013/11/18 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
浅谈被jQuery抛弃的函数及替代函数
2015/05/03 Javascript
js操作css属性实现div层展开关闭效果的方法
2015/05/11 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
2015/07/01 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
2016/09/06 Javascript
Angular中ng-bind和ng-model的区别实例详解
2017/04/10 Javascript
react-native之ART绘图方法详解
2017/08/08 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
element el-input directive数字进行控制
2018/10/11 Javascript
基于JavaScript实现单例模式
2019/10/30 Javascript
React服务端渲染原理解析与实践
2021/03/04 Javascript
[16:14]教你分分钟做大人:米拉娜(HEROS)
2014/11/24 DOTA
python实现的简单FTP上传下载文件实例
2015/06/30 Python
Python下载网络小说实例代码
2018/02/03 Python
Python异常的检测和处理方法
2018/10/26 Python
python+flask实现API的方法
2018/11/21 Python
Python3爬虫学习之将爬取的信息保存到本地的方法详解
2018/12/12 Python
使用Django和Postgres进行全文搜索的实例代码
2020/02/13 Python
python获取命令行参数实例方法讲解
2020/11/02 Python
谷歌浏览器小字体处理方案即12px以下字体
2013/12/17 HTML / CSS
安全责任书怎么写
2014/07/28 职场文书
通知函的格式
2015/04/27 职场文书
军事博物馆观后感
2015/06/05 职场文书
先进个人主要事迹范文
2015/11/04 职场文书
中学语文教学反思
2016/02/16 职场文书
教你用Java在个人电脑上实现微信扫码支付
2021/06/13 Java/Android