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 相关文章推荐
Javascript 布尔型分析
Dec 22 Javascript
用 Javascript 验证表单(form)中的单选(radio)值
Sep 08 Javascript
AngularJS的表单使用详解
Jun 17 Javascript
跟我学习javascript的Date对象
Nov 19 Javascript
JavaScript函数柯里化详解
Apr 29 Javascript
一次$.getJSON不执行的简单记录
Jul 19 Javascript
简单实现js浮动框
Dec 13 Javascript
Angular实现跨域(搜索框的下拉列表)
Feb 16 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
基于iScroll实现内容滚动效果
Mar 21 Javascript
ES6 Array常用扩展的应用实例分析
Jun 26 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函数,php爱好者站推荐
2007/03/19 PHP
php include的妙用,实现路径加密
2008/07/29 PHP
PHP伪造referer实例代码
2008/09/20 PHP
ThinkPHP模板范围判断输出In标签与Range标签用法详解
2014/06/30 PHP
php中动态调用函数的方法
2015/03/16 PHP
几行代码轻松实现PHP文件打包下载zip
2017/03/01 PHP
php7性能提升的原因详解
2019/10/13 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
豆瓣网的jquery代码实例
2008/06/15 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
2013/03/17 Javascript
JavaScript—window对象使用示例
2013/12/09 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
js实现内容显示并使用json传输数据
2016/03/16 Javascript
js判断iframe中元素是否存在的实现代码
2016/12/24 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
JavaScript转换数据库DateTime字段类型方法
2017/06/27 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
2019/05/27 jQuery
Vue2.x通用条件搜索组件的封装及应用详解
2019/05/28 Javascript
JavaScript实现tab栏切换效果
2020/03/16 Javascript
python3实现随机数
2018/06/25 Python
破解安装Pycharm的方法
2018/10/19 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
python程序如何进行保存
2020/07/03 Python
英国领先的酒杯和水晶玻璃器皿制造商:Dartington Crystal
2019/06/23 全球购物
乐高西班牙官方商店:LEGO Shop ES
2019/12/01 全球购物
班组建设经验交流材料
2014/05/12 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
群众路线教育实践活动对照检查材料思想汇报(副处级领导)
2014/10/04 职场文书
工程技术员岗位职责
2015/04/11 职场文书
2015年乡镇党务公开工作总结
2015/05/19 职场文书
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书
Java SSM配置文件案例详解
2021/08/30 Java/Android