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 相关文章推荐
让innerHTML的脚本也可以运行起来
Jul 01 Javascript
jQuery 位置插件
Dec 25 Javascript
js写的方法实现上传图片之后查看大图
Mar 05 Javascript
无限树Jquery插件zTree的常用功能特性总结
Sep 11 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 Javascript
javascript实现控制浏览器全屏
Mar 30 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
Nov 11 Javascript
Angular.Js的自动化测试详解
Dec 09 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
Sep 30 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
React 组件渲染和更新的实现代码示例
Feb 21 Javascript
原生js拖拽功能制作滑动条实例代码
Feb 05 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
萌王史莱姆”萌王性别尴尬!那“萌战”归女组还是男?
2018/12/17 日漫
改造一台复古桌面收音机
2021/03/02 无线电
php学习之简单计算器实现代码
2011/06/09 PHP
深入浅析PHP无限极分类的案例教程
2016/05/09 PHP
mac下多个php版本快速切换的方法
2016/10/09 PHP
深入浅析PHP的session反序列化漏洞问题
2017/06/15 PHP
ThinkPHP框架实现FTP图片上传功能示例
2019/04/08 PHP
PHP SESSION跨页面传递失败解决方案
2020/12/11 PHP
jQuery 浮动广告实现代码
2008/12/25 Javascript
JQuery select标签操作代码段
2010/05/16 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
2014/05/08 Javascript
jquery实现的一个简单进度条效果实例
2014/05/12 Javascript
JavaScript获取当前网页最后修改时间的方法
2015/04/03 Javascript
JavaScript学习笔记之数组求和方法
2016/03/23 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
jQuery选择器之属性过滤选择器详解
2017/09/28 jQuery
vue基于element的区间选择组件
2018/09/07 Javascript
如何测量vue应用运行时的性能
2019/06/21 Javascript
typescript编写微信小程序创建项目的方法
2021/01/29 Javascript
[00:37]2016完美“圣”典风云人物:AMS宣传片
2016/12/06 DOTA
python获取多线程及子线程的返回值
2017/11/15 Python
详解Python之unittest单元测试代码
2018/01/24 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
Python读取xlsx数据生成图标代码实例
2020/08/12 Python
Python3+selenium配置常见报错解决方案
2020/08/28 Python
moosejaw旗下的户外商品促销网站:Mountain Steals
2017/02/27 全球购物
凯特王妃父母建立的派对用品网站:Party Pieces
2017/05/28 全球购物
SNIDEL官网:日本VIVI杂志人气少女第一品牌
2020/03/12 全球购物
设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
师范应届毕业生自荐信
2013/11/18 职场文书
个人委托书怎么写
2014/04/04 职场文书
法人授权委托书范本
2014/04/04 职场文书
爱耳日活动总结
2014/04/30 职场文书
端午节活动总结
2014/08/26 职场文书
学法用法心得体会(2016推荐篇)
2016/01/21 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS