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 相关文章推荐
jquery隐藏标签和显示标签的实例
Nov 11 Javascript
ie 7/8不支持trim的属性的解决方案
May 23 Javascript
JavaScript函数作用域链分析
Feb 13 Javascript
JS限制条件补全问题实例分析
Dec 16 Javascript
详解vue过滤器在v2.0版本用法
Jun 01 Javascript
为什么我们要做三份 Webpack 配置文件
Sep 18 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
Apr 28 Javascript
JavaScript动态检测密码强度原理及实现方法详解
Jun 11 Javascript
vue实现拖拽的简单案例 不超出可视区域
Jul 25 Javascript
vue中axios的二次封装实例讲解
Oct 14 Javascript
javascript实现京东登录显示隐藏密码
Aug 02 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 Echo字符串的连接格式
2016/03/07 PHP
php使用parse_str实现查询字符串解析到变量中的方法
2017/02/17 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
2011/10/12 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
详解Vue 非父子组件通信方法(非Vuex)
2017/05/24 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
2018/06/19 Javascript
vue实现搜索功能
2019/05/28 Javascript
Vue 实现前端权限控制的示例代码
2019/07/09 Javascript
vue的路由映射问题及解决方案
2019/10/14 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
Python程序设计入门(1)基本语法简介
2014/06/13 Python
Python打开文件,将list、numpy数组内容写入txt文件中的方法
2018/10/26 Python
利用PyCharm Profile分析异步爬虫效率详解
2019/05/08 Python
python tornado使用流生成图片的例子
2019/11/18 Python
浅析python标准库中的glob
2020/03/13 Python
pip install 使用国内镜像的方法示例
2020/04/03 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
调整Jupyter notebook的启动目录操作
2020/04/10 Python
利用keras使用神经网络预测销量操作
2020/07/07 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
几个SQL的面试题
2014/03/08 面试题
自主招生推荐信范文
2014/05/10 职场文书
市场调查策划方案
2014/06/10 职场文书
毕业论文答辩稿范文
2015/06/23 职场文书
医院中层管理人员培训心得体会
2016/01/11 职场文书
MySQL系列之八 MySQL服务器变量
2021/07/02 MySQL
pycharm安装深度学习pytorch的d2l包失败问题解决
2022/03/25 Python