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 17 Javascript
再谈Jquery Ajax方法传递到action(补充)
May 12 Javascript
用svg制作富有动态的tooltip
Jul 17 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
详解JS-- 浮点数运算处理
Nov 28 Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 Javascript
深入浅析JSONAPI在PHP中的应用
Dec 24 Javascript
webpack打包js的方法
Mar 12 Javascript
vue异步axios获取的数据渲染到页面的方法
Aug 09 Javascript
element el-input directive数字进行控制
Oct 11 Javascript
vue+webpack中配置ESLint
Nov 07 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 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代码
2010/07/17 PHP
php设计模式 Visitor 访问者模式
2011/06/28 PHP
PHP header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
php将图片文件转换成二进制输出的方法
2015/06/10 PHP
CI(Codeigniter)的Setting增强配置类实例
2016/01/06 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
JQuery jsonp 使用示例代码
2009/08/12 Javascript
javascript学习笔记(五) Array 数组类型介绍
2012/06/19 Javascript
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
2016/07/18 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
2017/03/08 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
2018/01/18 jQuery
React组件中的this的具体使用
2018/02/28 Javascript
Angularjs中date过滤器失效的问题及解决方法
2018/07/06 Javascript
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
javascript中的this作用域详解
2019/07/15 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
2019/12/10 Javascript
element跨分页操作选择详解
2020/06/29 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
2020/07/27 Javascript
python实现的一个p2p文件传输实例
2014/06/04 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
pandas 像SQL一样使用WHERE IN查询条件说明
2020/06/05 Python
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
餐饮营销方案
2014/02/23 职场文书
大学生创业计划书
2014/08/14 职场文书
群众路线党员个人剖析材料
2014/10/08 职场文书
付款承诺函范文
2015/01/21 职场文书
体育教师研修感悟
2015/11/18 职场文书
党风廉洁教育心得体会
2016/01/20 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python
Redis入门教程详解
2021/08/30 Redis