Javascript 中介者模式实例


Posted in Javascript onDecember 16, 2009

问题:

在页面上,用户会有很多的操作 ,每进行一次操作我们需要去展示操作的结果,在这里我们有了一个问题,我们应如何去展示不同的结果呢?在展示的过程中我们还要考虑当页面功能不断的增加与修改,结果展示也不断的增多,我们要用一个应对这些变化最好的方法解决问题。

解决方法:

在网盘开发中就遇到了这样的一个问题,经过几番的思考,决定了用如下的方式去解决这个问题,先看图:

 Javascript 中介者模式实例

 从图中我们可以知道,会使用到一个中介专门去接收使用者的信息,再发送到相应的展示主题,这样我们就可以解决了展示方式不段改变的问题,如何去展示就是展示主题代码问题了。

 这个方法也就是我们平常说的中介者模式,如果想了解更多的可以去google或baidu一下中介者模式。

代码:

好了,现在我符上一些代码,如果大家更好的解决方案也可以给我个评论。

/* 
* 中介 
**/ 
var Mediator = function(){ 
var self = this; 
var _messageObj = {}; 
this.Register = function(key,obj){ 
//注册中介 
_messageObj[key] = obj; 
}, 
this.Send = function(key,message){ 
//根据客户Key发送信息给客户 
if(_messageObj[key]){ 
_messageObj[key].Receive(message); 
} 
} 
} /* 
* 客户父类 
**/ 
var MessageBase = function(key,mediator){ 
mediator.Register(key,this); //注册中介 
} 
/* 
* 自由主题1 
**/ 
var MessageObj1 = function(key,mediator){ 
MessageBase.call(this,key,mediator); //继承父类 
this.Receive = function(message){ 
//接收中介消息 
alert("Object1 " + message); 
} 
} 
/* 
* 自由主题2 
**/ 
var MessageObj2 = function(key,mediator){ 
MessageBase.call(this,key,mediator); //继承父类 
this.Receive = function(message){ 
//接收中介消息 
alert("Object2 " + message); 
} 
} 
var med; //中介者 
var init = function(){ 
//客户代码 
med = new Mediator(); 
new MessageObj1("m1",med); 
new MessageObj2("m2",med); 
}; 
window.onload = function(){ 
init(); 
}

使用方法:
<a href="javascript://" onclick="med.Send('m1','Good');">test1</a> 
<a href="javascript://" onclick="med.Send('m2','GoodBoy');">test2</a>

下载:http://xiazai.3water.com/200912/yuanma/js_zhongjie.rar
Javascript 相关文章推荐
IE6/7/8中Option元素未设value时Select将获取空字符串
Apr 07 Javascript
JS 修改URL参数(实现代码)
Jul 08 Javascript
使用jquery自定义鼠标样式满足个性需求
Nov 05 Javascript
使用CSS3的scale实现网页整体缩放
Mar 18 Javascript
jquery学习总结(超级详细)
Sep 04 Javascript
js中style.display=&quot;&quot;无效的解决方法
Oct 30 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
Jan 28 Javascript
JavaScript中两个字符串的匹配
Jun 08 Javascript
Bootstrap模态窗口源码解析
Feb 08 Javascript
JavaScript注册时密码强度校验代码
Jun 30 Javascript
JavaScript偏函数与柯里化实例详解
Mar 27 Javascript
vue.js click点击事件获取当前元素对象的操作
Aug 07 Javascript
js textarea自动增高并隐藏滚动条
Dec 16 #Javascript
javascript 动态设置已知select的option的value值的代码
Dec 16 #Javascript
javascript 语法基础 想学习js的朋友可以看看
Dec 16 #Javascript
JavaScript 解析Json字符串的性能比较分析代码
Dec 16 #Javascript
TextArea 控件的最大长度问题(js json)
Dec 16 #Javascript
比较详细的关于javascript 解析json的代码
Dec 16 #Javascript
JQuery读取XML文件数据并显示的实现代码
Dec 16 #Javascript
You might like
杏林同学录(八)
2006/10/09 PHP
深入PHP内存相关的功能特性详解
2013/06/08 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
javascript引导程序
2008/10/26 Javascript
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
web网页按比例显示图片实现原理及js代码
2013/08/09 Javascript
js中同步与异步处理的方法和区别总结
2013/12/25 Javascript
禁止IE用右键的JS代码
2013/12/30 Javascript
jquery操作select详解(取值,设置选中)
2014/02/07 Javascript
javascript 拷贝节点cloneNode()使用介绍
2014/04/03 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
2016/06/08 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
利用Node.js+Koa框架实现前后端交互的方法
2017/02/27 Javascript
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
gulp教程_从入门到项目中快速上手使用方法
2017/09/14 Javascript
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
vue项目前端错误收集之sentry教程详解
2019/05/27 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
2019/09/05 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
原生js实现简单轮播图
2020/10/26 Javascript
javascript实现滚轮轮播图片
2020/12/13 Javascript
[37:21]完美世界DOTA2联赛PWL S2 Inki vs Magma 第二场 11.22
2020/11/24 DOTA
python使用post提交数据到远程url的方法
2015/04/29 Python
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
django如何连接已存在数据的数据库
2018/08/14 Python
python下的opencv画矩形和文字注释的实现方法
2019/07/09 Python
Django框架视图函数设计示例
2019/07/29 Python
标记环介质访问控制协议
2016/03/27 面试题
简单叙述一下MYSQL的优化
2016/05/09 面试题
大学毕业生个人自荐信范文
2014/01/08 职场文书
结婚喜宴主持词
2014/03/14 职场文书
房地产资料员岗位职责
2014/07/02 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
导游词之天津盘山
2019/11/01 职场文书