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模拟弹出效果代码修正版
Aug 07 Javascript
读jQuery之一(对象的组成)
Jun 11 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
Jul 11 Javascript
用innerhtml提高页面打开速度的方法
Aug 02 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
Jun 23 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
vue组件传递对象中实现单向绑定的示例
Feb 28 Javascript
微信小程序实现循环动画效果
Jul 16 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
Aug 25 Javascript
在NPM发布自己造的轮子的方法步骤
Mar 09 Javascript
详解jQuery-each()方法
Mar 13 jQuery
使用node.JS中的url模块解析URL信息
Feb 06 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/06 PHP
php AJAX实例根据邮编自动完成地址信息
2008/11/23 PHP
组合算法的PHP解答方法
2012/02/04 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
php简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
PHP实现SMTP邮件的发送实例
2018/09/27 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
2014/05/01 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
2015/02/26 Javascript
javascript实现简单的二级联动
2015/03/19 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
2016/09/17 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
2016/11/02 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
2016/12/12 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
微信小程序实现下拉刷新动画
2019/06/21 Javascript
微信小程序实现pdf、word等格式文件上传的方法
2019/09/10 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
2019/12/17 Javascript
如何在Vue项目中添加接口监听遮罩
2021/01/25 Vue.js
Python接收Gmail新邮件并发送到gtalk的方法
2015/03/10 Python
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
Python3爬虫教程之利用Python实现发送天气预报邮件
2018/12/16 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
python实现简单图片物体标注工具
2019/03/18 Python
PyQt5创建一个新窗口的实例
2019/06/20 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
python wsgiref源码解析
2021/02/06 Python
德国家具折扣店:POCO
2020/02/28 全球购物
信息管理员岗位职责
2013/12/01 职场文书
2014年房地产个人工作总结
2014/12/20 职场文书
2014年学生管理工作总结
2014/12/20 职场文书
民政工作个人总结
2015/02/28 职场文书
2015年网络管理员工作总结
2015/05/21 职场文书
Python中threading库实现线程锁与释放锁
2021/05/17 Python
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android