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 相关文章推荐
js变量作用域及可访问性的探讨
Nov 23 Javascript
js不是基础的基础
Dec 24 Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 Javascript
jquery对复选框(checkbox)的操作汇总
Jan 13 Javascript
Validform表单验证总结篇
Oct 31 Javascript
基于bootstrap的选择框插件icheck
Dec 23 Javascript
浅谈关于angularJs中使用$.ajax的注意点
Aug 12 Javascript
vue-router传递参数的几种方式实例详解
Nov 13 Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
微信小程序云开发之新手环境配置
May 16 Javascript
javascript网页随机点名实现过程解析
Oct 15 Javascript
vue  elementUI 表单嵌套验证的实例代码
Nov 06 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
十大催泪虐心动漫电影,有几部你还没看
2020/03/04 日漫
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
解析PHP将对象转换成数组的方法(兼容多维数组类型)
2013/06/21 PHP
ThinkPHP连接数据库及主从数据库的设置教程
2014/08/22 PHP
php实现事件监听与触发的方法
2014/11/21 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
CMSPRESS 10行代码搞定 PHP无限级分类2
2018/03/30 PHP
另类调用flash无须激活的方法
2006/12/27 Javascript
javascript 随机展示头像实现代码
2011/12/06 Javascript
JavaScript定义类的几种方式总结
2014/01/06 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
深入分析Javascript跨域问题
2015/04/17 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
基于js中的存储键值对以及注意事项介绍
2018/03/30 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
2020/03/04 Javascript
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
[05:41]2014DOTA2西雅图国际邀请赛 小组赛7月10日TOPPLAY
2014/07/10 DOTA
[02:41]辉夜杯现场一家三口 “我爸玩风行 我玩血魔”
2015/12/27 DOTA
推荐11个实用Python库
2015/01/23 Python
用Python实现一个简单的能够上传下载的HTTP服务器
2015/05/05 Python
Django实现表单验证
2018/09/08 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
pycharm通过ssh连接远程服务器教程
2020/02/12 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
HTML5 History API 实现无刷新跳转
2016/01/11 HTML / CSS
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
阿里健康官方海外旗舰店:阿里健康国际自营
2017/11/24 全球购物
创业计划书的内容步骤和要领
2014/01/04 职场文书
资源环境与城乡规划管理专业自荐书
2014/09/26 职场文书
银行委托书范本
2014/09/28 职场文书
学生个人评语大全
2015/01/04 职场文书
《假如》教学反思
2016/02/17 职场文书
MySQL七大JOIN的具体使用
2022/02/28 MySQL