JavaScript 中介者模式实现与实例解析

问题背景与解决思路

问题：

在网页应用中，用户交互操作频繁，每次操作后都需要展示相应的结果。这里面临一个核心问题：如何高效地展示多样化的结果？随着页面功能的不断增加和修改，结果展示的逻辑也随之增多，我们需要一种能够灵活应对这些变化的最佳解决方案。

解决方法：

在网盘开发项目中，我们遇到了类似的挑战。经过深入分析，我们决定采用以下方案来解决该问题，具体架构可参考下图：

从架构图可以看出，我们引入一个专门的中介者（Mediator）来统一接收用户的操作信息，并将其转发给对应的展示主题。这种方式有效解决了展示方式频繁变更的问题，具体的展示逻辑由各个展示主题代码独立处理。

这种设计模式即为我们熟知的中介者模式。如需深入了解，可通过搜索引擎查询“中介者模式”获取更多资料。

中介者模式代码实现

代码：

以下是具体的代码实现。如果您有更好的解决方案，欢迎在评论区留言交流。

 
/* 
* 中介
**/ 
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();
} 

HTML 调用示例

使用方法：

 
<a href="javascript://" onclick="med.Send('m1','Good');">test1</a>
<a href="javascript://" onclick="med.Send('m2','GoodBoy');">test2</a>

下载：http://xiazai.jb51.net/200912/yuanma/js_zhongjie.rar