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 相关文章推荐
使用indexOf等在JavaScript的数组中进行元素查找和替换
Sep 18 Javascript
JavaScript中的Truthy和Falsy介绍
Jan 01 Javascript
简化版手机端照片预览组件
Apr 13 Javascript
javascript中replace( )方法的使用
Apr 24 Javascript
详细解读JavaScript编程中的Promise使用
Jul 27 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 Javascript
JS 拼凑字符串的简单实例
Sep 02 Javascript
easyUI combobox实现联动效果
Jan 17 Javascript
jquery实现提示语淡入效果
May 05 jQuery
理解Proxy及使用Proxy实现vue数据双向绑定操作
Jul 18 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
Sep 25 Javascript
nuxt引入组件和公共样式的操作
Nov 05 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
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
试用php中oci8扩展
2015/06/18 PHP
yii,CI,yaf框架+smarty模板使用方法
2015/12/29 PHP
php代码架构的八点注意事项
2016/01/25 PHP
php HTML无刷新提交表单
2016/04/05 PHP
PHP类型约束用法示例
2016/09/28 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
2017/11/06 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
基于jQuery UI CSS Framework开发Widget的经验
2010/08/21 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
2014/05/23 Javascript
js无法获取到html标签的属性的解决方法
2016/07/26 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
Node.js五大应用性能技巧小结(必须收藏)
2017/08/09 Javascript
JS实现页面内跳转的简单代码
2017/09/03 Javascript
Express进阶之log4js实用入门指南
2018/02/10 Javascript
浅谈vue.js导入css库(elementUi)的方法
2018/03/09 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
2018/07/01 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
JavaScript惰性求值的一种实现方法示例
2019/01/11 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
[02:06]DOTA2英雄基础教程 暗影萨满
2013/12/16 DOTA
Python操作MySQL数据库9个实用实例
2015/12/11 Python
Python下使用Scrapy爬取网页内容的实例
2018/05/21 Python
python 多进程共享全局变量之Manager()详解
2019/08/15 Python
python3实现的zip格式压缩文件夹操作示例
2019/08/17 Python
Python双链表原理与实现方法详解
2020/02/22 Python
在python里创建一个任务(Task)实例
2020/04/25 Python
python对execl 处理操作代码
2020/06/22 Python
浅谈keras中Dropout在预测过程中是否仍要起作用
2020/07/09 Python
Python字典实现伪切片功能
2020/10/28 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
蔻驰法国官网:COACH法国
2018/11/14 全球购物
交通事故和解协议书
2014/09/25 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
护士医德医风心得体会
2016/01/25 职场文书
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python