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实现浏览器窗口大小被改变时触发事件的方法
Feb 02 Javascript
jQuery向webApi提交post json数据
Jan 16 Javascript
angular实现IM聊天图片发送实例
May 08 Javascript
javascript填充默认头像方法
Feb 22 Javascript
vue中$refs的用法及作用详解
Apr 24 Javascript
在微信小程序中渲染HTML内容的方法示例
Sep 28 Javascript
layui弹出框Tab选项卡的示例代码
Sep 04 Javascript
基于JS实现父组件的请求服务过程解析
Oct 14 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
Oct 14 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 Javascript
JavaScript实现答题评分功能页面
Jun 24 Javascript
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
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的单引号和双引号 字符串效率
2009/05/27 PHP
CURL状态码列表(详细)
2013/06/27 PHP
php一次性删除前台checkbox多选内容的方法
2013/09/22 PHP
php画图实例
2014/11/05 PHP
phalcon框架使用指南
2016/02/23 PHP
PHP之多条件混合筛选功能的实现方法
2019/10/09 PHP
13个绚丽的Jquery 界面设计网站推荐
2010/09/28 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
2013/09/26 Javascript
深入理解JQuery keyUp和keyDown的区别
2013/12/12 Javascript
jquery实现的图片点击滚动效果
2014/04/29 Javascript
js实现input框文字动态变换显示效果
2015/08/19 Javascript
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
果断收藏9个Javascript代码高亮脚本
2016/01/06 Javascript
直接拿来用的页面跳转进度条JS实现
2016/01/06 Javascript
创建一个类Person的简单实例
2016/05/17 Javascript
Bootstrap实现水平排列的表单
2016/07/04 Javascript
整理关于Bootstrap排版的慕课笔记
2017/03/29 Javascript
详解angularjs4部署文件过大解决过程
2018/12/05 Javascript
vue-router跳转时打开新页面的两种方法
2019/07/29 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
2019/12/04 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
PyQt5每天必学之创建窗口居中效果
2018/04/19 Python
python实现K近邻回归,采用等权重和不等权重的方法
2019/01/23 Python
Python3.5 Pandas模块之DataFrame用法实例分析
2019/04/23 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
Python gevent协程切换实现详解
2020/09/14 Python
美国环保妈妈、儿童和婴儿用品购物网站:The Tot
2019/11/24 全球购物
三维科技面试题
2013/07/27 面试题
大学社团计划书
2014/05/01 职场文书
2014年乡镇妇联工作总结
2014/12/02 职场文书
舞出我人生观后感
2015/06/16 职场文书
会议室使用管理制度
2015/08/06 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
Python数据分析之绘图和可视化详解
2021/06/02 Python
PO模式在selenium自动化测试框架的优势
2022/03/20 Python