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 随机数产生6位数字
May 13 Javascript
更优雅的事件触发兼容
Oct 24 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
May 23 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
Oct 20 Javascript
加载列表时jquery获取ul中第一个li的属性
Nov 02 Javascript
AngularJS 使用 UI Router 实现表单向导
Jan 29 Javascript
关于function类中定义变量this的简单说明
May 28 Javascript
概述jQuery的元素筛选
Nov 23 Javascript
Javascript前端经典的面试题及答案
Mar 14 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
May 05 Javascript
webpack4.x打包过程详解
Jul 18 Javascript
JavaScript判断浏览器版本的方法
Nov 03 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
十大“创意”战术!
2020/03/04 星际争霸
PHP中::、-&amp;gt;、self、$this几种操作符的区别介绍
2013/04/24 PHP
Zend Framework教程之Bootstrap类用法概述
2016/03/14 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
php解析xml 的四种简单方法(附实例)
2016/07/11 PHP
from表单多个按钮提交用onclick跳转不同action
2014/04/24 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
2014/10/20 Javascript
javascript实现数组中的内容随机输出
2015/08/11 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
Bootstrap风格的zTree右键菜单
2017/02/17 Javascript
基于Vue实现拖拽效果
2018/04/27 Javascript
jQuery实现简单全选框
2020/09/13 jQuery
Python中subprocess模块用法实例详解
2015/05/20 Python
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
python负载均衡的简单实现方法
2018/02/04 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
python BlockingScheduler定时任务及其他方式的实现
2019/09/19 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
Pytorch技巧:DataLoader的collate_fn参数使用详解
2020/01/08 Python
Python对wav文件的重采样实例
2020/02/25 Python
Python多进程编程常用方法解析
2020/03/26 Python
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2020/04/07 Python
python 实现图片批量压缩的示例
2020/12/18 Python
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
斯洛伐克香水和化妆品购物网站:Parfemy-Elnino.sk
2020/01/28 全球购物
档案检查欢迎词
2014/01/13 职场文书
咖啡店自主创业商业计划书
2014/01/22 职场文书
社区交通安全实施方案
2014/03/22 职场文书
献爱心活动总结
2014/05/07 职场文书
2015年安全生产责任书
2015/01/30 职场文书
舌尖上的中国观后感
2015/06/02 职场文书
入党转正介绍人意见
2015/06/03 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
2019最新劳动仲裁申请书!
2019/07/08 职场文书
html2 canvas svg不能识别的解决方案
2021/06/03 HTML / CSS