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 相关文章推荐
更换select下拉菜单背景样式的实现代码
Dec 20 Javascript
jquery设置元素的readonly和disabled的写法
Sep 22 Javascript
node.js中的fs.exists方法使用说明
Dec 17 Javascript
JavaScript中原型和原型链详解
Feb 11 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
May 05 Javascript
BootStrap扔进Django里的方法详解
May 13 Javascript
jQuery的实例及必知重要的jQuery选择器详解
May 20 Javascript
微信QQ的二维码登录原理js代码解析
Jun 23 Javascript
Bootstrap select多选下拉框实现代码
Dec 23 Javascript
微信小程序 扎金花简单实例
Feb 21 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
Jan 10 Javascript
vue实现简单图片上传
Jun 30 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
php array_search() 函数使用
2010/04/13 PHP
Windows下的PHP 5.3.x安装 Zend Guard Loader教程
2014/09/06 PHP
深入php内核之php in array
2015/11/10 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
PHP实现唤起微信支付功能
2019/02/18 PHP
lib.utf.js
2007/08/21 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
2010/09/12 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
2016/06/21 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
js变量提升深入理解
2016/09/16 Javascript
使用DeviceOne实现微信小程序功能
2016/12/29 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
微信小程序开发背景图显示功能
2018/08/08 Javascript
Vue源码探究之状态初始化
2018/11/14 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
js实现随机抽奖
2020/03/19 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
神经网络python源码分享
2017/12/15 Python
Python面向对象进阶学习
2019/05/21 Python
Django外键(ForeignKey)操作以及related_name的作用详解
2019/07/29 Python
Python操作列表常用方法实例小结【创建、遍历、统计、切片等】
2019/10/25 Python
python中time tzset()函数实例用法
2021/02/18 Python
css3实现圆锥渐变conic-gradient效果
2020/02/12 HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
2016/10/23 HTML / CSS
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
业务主管岗位职责
2013/11/20 职场文书
简历的自荐信
2013/12/19 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
甜品店创业计划书
2014/09/21 职场文书
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
2014年小学教师工作自我评价
2014/09/22 职场文书
实习介绍信模板
2015/01/30 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
2017年大学生寒假社会实践活动总结
2016/04/06 职场文书