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判断IE6/IE7/FF的代码[XMLHttpRequest]
Feb 16 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
May 28 Javascript
jQuery实现的在线答题功能
Apr 12 Javascript
js实现点击切换TAB标签实例
Aug 21 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
Oct 28 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
Aug 02 Javascript
微信小程序 video详解及简单实例
Jan 16 Javascript
Bootstrap BootstrapDialog使用详解
Feb 17 Javascript
微信小程序页面传值实例分析
Apr 19 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
Dec 03 Javascript
javascript关于“时间”的一次探索
Jul 24 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中使用Oracle数据库(1)
2006/10/09 PHP
PHP常用技术文之文件操作和目录操作总结
2014/09/27 PHP
php获取json数据所有的节点路径
2015/05/17 PHP
注意!PHP 7中不要做的10件事
2016/09/18 PHP
PHP巧妙利用位运算实现网站权限管理的方法
2017/03/12 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
JS 实现Json查询的方法实例
2013/04/12 Javascript
瀑布流布局代码一例
2014/04/11 Javascript
通过$(this)使用jQuery包装后的方法或属性
2014/05/18 Javascript
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
2015/10/23 Javascript
js编写一个简单的产品放大效果代码
2016/06/27 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
Vue.js创建Calendar日历效果
2016/11/03 Javascript
jQuery之动画效果大全
2016/11/09 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
2017/05/03 Javascript
利用jsonp与代理服务器方案解决跨域问题
2017/09/14 Javascript
Python 安装setuptools和pip工具操作方法(必看)
2017/05/22 Python
python爬虫爬取某站上海租房图片
2018/02/04 Python
Python实现的径向基(RBF)神经网络示例
2018/02/06 Python
Python缓存技术实现过程详解
2019/09/25 Python
Django异步任务线程池实现原理
2019/12/17 Python
python使用scapy模块实现ping扫描的过程详解
2021/01/21 Python
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
New Balance德国官方网站:购买鞋子和服装
2019/08/31 全球购物
数据库方面面试题
2012/04/22 面试题
《灯光》教学反思
2014/02/08 职场文书
书香校园活动方案
2014/02/28 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
乡镇食品安全责任书
2014/07/28 职场文书
小学生国庆节演讲稿
2014/09/05 职场文书
采购员岗位职责范本
2015/04/07 职场文书
财务会计个人原因辞职信
2019/06/21 职场文书
导游词幽默开场白
2019/06/26 职场文书