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 相关文章推荐
基于jquery的checkbox下拉框插件代码
Jun 25 Javascript
js中typeof的用法汇总
Dec 12 Javascript
浅谈javascript六种数据类型以及特殊注意点
Dec 20 Javascript
JavaScript更改原始对象valueOf的方法
Mar 19 Javascript
聊一聊Vue.js过渡效果
Sep 07 Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 Javascript
浅谈$_FILES数组为空的原因
Feb 16 Javascript
JavaScript高阶函数_动力节点Java学院整理
Jun 28 Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 Javascript
React Component存在的几种形式详解
Nov 06 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
Aug 04 Javascript
从表单校验看JavaScript策略模式的使用详解
Oct 17 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
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
php中用于检测一个地理IP地址是否可用的代码
2012/02/19 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
PhpStorm本地断点调试的方法步骤
2018/05/21 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
几个高效,简洁的字符处理函数
2007/04/12 Javascript
JavaScript 应用技巧集合[推荐]
2009/08/30 Javascript
Javascript 刷新全集常用代码
2009/11/22 Javascript
基于JQuery的cookie插件
2010/04/07 Javascript
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
基于jquery tab切换(防止页面刷新)
2012/05/23 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
2015/05/04 Javascript
jquery实现经典的淡入淡出选项卡效果代码
2015/09/22 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
2017/03/27 Javascript
AngularJS之自定义服务详解(factory、service、provider)
2017/04/14 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
layui table 获取分页 limit的方法
2019/09/20 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
JS算法教程之字符串去重与字符串反转
2020/12/15 Javascript
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
python获取当前日期和时间的方法
2015/04/30 Python
Python中format()格式输出全解
2019/04/12 Python
Python3+PyInstall+Sciter解决报错缺少dll、html等文件问题
2019/07/15 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
Algenist奥杰尼官网:微藻抗衰老护肤品牌
2017/07/15 全球购物
美国滑雪和滑雪板商店:Buckman
2018/03/03 全球购物
受希腊女神灵感的晚礼服、鸡尾酒礼服和婚纱:THEIA
2018/04/15 全球购物
部队万能检讨书
2014/02/20 职场文书
人力资源经理的岗位职责
2014/03/02 职场文书
元旦获奖感言
2014/03/08 职场文书
大学校务公开实施方案
2014/03/31 职场文书