Javascript 模式实例 观察者模式_javascript技巧

在园里有许多牛人都已经写过这些文章,不过大多的例子都是.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
一个人能够走多远,取决于与谁同行

时间: 2024-11-01 03:56:05

Javascript 模式实例 观察者模式_javascript技巧的相关文章

JavaScript对象创建模式实例汇总_javascript技巧

本文实例总结了JavaScript对象创建模式.分享给大家供大家参考,具体如下: 在JavaScript中创建对象是很容易的,可以使用对象字面量或者构造函数.常用的创建对象的模式有以下几种: 一. 工厂模式 工厂模式抽象了具体对象的过程,用函数来封装以特ing接口创建对象的细节. 如下: function createAnimal(name, age) { var o = new Object(); o.name = name; o.age = age; o.sayName = function

学习JavaScript设计模式之观察者模式_javascript技巧

一.定义 观察者模式(发布-订阅模式):其定义对象间一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. 在JavaScript中,一般使用事件模型来替代传统的观察者模式. 好处: (1)可广泛应用于异步编程中,是一种替代传递回调函数的方案. (2)可取代对象之间硬编码的通知机制,一个对象不用再显示地调用另外一个对象的某个接口.两对象轻松解耦. 二.DOM事件–观察者模式典例 需要监控用户点击document.body的动作,但是我们没有办法预知用户将在什么时间点击

一个简单的JavaScript Map实例(分享)_javascript技巧

用js写了一个Map,带遍历功能,请大家点评下啦. //map.js Array.prototype.remove = function(s) { for (var i = 0; i < this.length; i++) { if (s == this[i]) this.splice(i, 1); } } /** * Simple Map * * * var m = new Map(); * m.put('key','value'); * ... * var s = ""; *

JavaScript实现Iterator模式实例分析_javascript技巧

本文实例讲述了JavaScript实现Iterator模式的方法.分享给大家供大家参考.具体分析如下: 经常在网上看到有不少JS设计模式的示例.这里写一下JavaScript实现Iterator模式的方法,记录在此,仅作备忘: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo

JavaScript代码复用模式实例分析_javascript技巧

任何编程都提出代码复用,否则话每次开发一个新程序或者写一个新功能都要全新编写的话,那就歇菜了,但是代码复用也是有好要坏,接下来的两篇文章我们将针对代码复用来进行讨论,第一篇文避免篇,指的是要尽量避免使用这些模式,因为或多或少有带来一些问题:第二排是推荐篇,指的是推荐大家使用的模式,一般不会有什么问题. 模式1:默认模式 代码复用大家常用的默认模式,往往是有问题的,该模式使用Parent()的构造函数创建一个对象,并且将该对象赋值给Child()的原型.我们看一下代码: 复制代码 代码如下: fu

JavaScript闭包实例讲解_javascript技巧

这带来的好处是内部函数可以访问定义它们的外部函数的参数和变量. 首先,我们来构造一个简单的对象. 复制代码 代码如下: var testObj = {    value: 10,    add: function(inc){        this.value += (typeof inc === "number") ? inc : 1;    }}; testObj.add();testObj.value; // 11 testObj.add(2);    testObj.value

浅析javascript闭包 实例分析_javascript技巧

官方解释 "闭包"是一个拥有许多变量和绑定了这些变量的环境表达式(通常是一个函数),因而这些变量也是环境表达式的一部分. 通俗解释 Javascript中所有的函数都是一个闭包.不过一般来说,嵌套的function产生的闭包更为强大,也是大部分时候我们所说的"闭包".看如下代码: 复制代码 代码如下: <script type="text/javascript"> <!-- //外层函数a function a(){ //临时变

JavaScript对数字的判断与处理实例分析_javascript技巧

本文实例讲述了JavaScript对数字的判断与处理技巧.分享给大家供大家参考.具体分析如下: Javascript多态的属性是非常爽的,一个var就不用记这么多奇怪的变量,然而,有时候你会困惑,为何,我明明是对两个数进行相加处理,可是结果却被当作字符串加起来呢?这就是Javascript的var不好的地方,它不像php,用一个.来指明这是字符串的连接.这是你需要parseFloat来明确指明这个var是数.需要用isNaN来判断这是不是数.isNaN(一个被判断的var)的时候,结果为真那么它

javascript函数式编程实例分析_javascript技巧

本文实例讲述了javascript函数式编程.分享给大家供大家参考.具体分析如下: js像其他动态语言一样是可以写高阶函数的,所谓高阶函数是可以操作函数的函数.因为在js中函数是一个彻彻底底的对象,属于第一类公民,这提供了函数式编程的先决条件. 下面给出一个例子代码,出自一本js教程,功能是计算数组元素的平均值和标准差,先列出非函数式编程的一种写法: var data = [1,1,3,5,5]; var total = 0; for(var i = 0;i < data.length;i++)