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工具_Form 封装
Aug 21 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
Jul 04 Javascript
通过一段代码简单说js中的this的使用
Jul 23 Javascript
JS的参数传递示例介绍
Feb 08 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
Aug 27 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
Jun 24 Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 24 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
Oct 09 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
node.js express框架实现文件上传与下载功能实例详解
Oct 15 Javascript
vue使用微信扫一扫功能的实现代码
Apr 11 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与Java进行通信的实现方法
2013/10/21 PHP
利用谷歌 Translate API制作自己的翻译脚本
2014/06/04 PHP
ThinkPHP模型详解
2015/07/27 PHP
PHP实现163邮箱自动发送邮件
2016/03/29 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
PHP sdk文档处理常用代码示例解析
2020/12/09 PHP
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
2010/11/05 Javascript
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
2011/06/27 Javascript
容易被忽略的JS脚本特性
2011/09/13 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
JavaScript对象的property属性详解
2014/04/01 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
AngularJs 弹出模态框(model)
2016/04/07 Javascript
js剪切板应用clipboardData实例解析
2016/05/29 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
JavaScript设计模式之代理模式实例分析
2019/01/16 Javascript
微信小程序实现banner图轮播效果
2020/06/28 Javascript
简述pm2常用命令集合及配置文件说明
2019/05/30 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
[00:48]完美“圣”典2016风云人物:xiao8宣传片
2016/11/30 DOTA
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
python+gdal+遥感图像拼接(mosaic)的实例
2020/03/10 Python
Python如何爬取b站热门视频并导入Excel
2020/08/10 Python
物理教育专业毕业生推荐信
2013/11/03 职场文书
学校春季防火方案
2014/06/08 职场文书
心理学专业求职信
2014/06/16 职场文书
党员民主评议总结
2014/10/20 职场文书
2014年林业工作总结
2014/12/05 职场文书
《分数乘法》教学反思
2016/02/24 职场文书
Python机器学习之基础概述
2021/05/19 Python