JavaScript 中介者模式：解耦对象交互的实战示例

中介者模式解决的问题

问题：

在网页交互中，用户执行多种操作后需要展示相应的结果。随着页面功能的不断扩展和修改，结果展示的需求也随之增加。如何设计一种灵活且易于维护的机制来应对这种变化，是本文需要解决的核心问题。

解决方案与架构设计

解决方法：

在 115 网盘的开发实践中，曾遇到类似的交互复杂性挑战。经过分析，我们采用了一种特定的架构方案来处理这一问题，具体逻辑结构可参考相关示意图。

如图所示，方案的核心在于引入一个专门的中介者对象。该中介者负责接收来自各个用户操作（客户端）的信息，并将其分发给对应的展示主题或处理模块。这种设计将展示逻辑的具体实现与消息分发解耦，使得当展示方式发生变化时，只需修改展示主题代码，而无需改动客户端逻辑。

这种设计模式即为经典的“中介者模式”（Mediator Pattern）。若需深入了解其理论背景，可通过搜索引擎查阅相关资料。

JavaScript 代码实现

代码：

以下是具体的 JavaScript 实现代码。欢迎提出更优的解决方案或建议。

 
/* 
* 中介
**/ 
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>

演示代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title>  </head> <body> <p>中介者模式：用一个中介对象来封装一系列的对象交互。中介者使各对象不需要显式地相互引用，从而使其耦合松散，而且可以独立地改变它们之间的交互。 </p> <!--使用方法--> test1 test2 </body> </html>