JavaScript设计模式与开发实践 中介者模式

　　中介者模式的作用就是解除对象与对象之间的紧耦合关系。增加一个中介者对象后，所有的相关对象都通过中介者对象来通信，而不是互相引用，所以当一个对象发生改变时，只需要通知中介者对象即可。中介者使各对象之间耦合松散，而且可以独立地改变它们之间的交互。中介者模式使网状的多对多关系变成了相对简单的一对多关系。

一、中介者模式的例子——泡泡堂游戏

　　先定义一个玩家构造函数，它有3 个简单的原型方法：Play.prototype.win、Play.prototype.lose以及表示玩家死亡的Play.prototype.die。

　　因为玩家的数目是2，所以当其中一个玩家死亡的时候游戏便结束, 同时通知它的对手胜利。

function Player( name ){
this.name = name
this.enemy = null; // 敌人
};

Player.prototype.win = function(){
console.log( this.name + ' won ' );
};
Player.prototype.lose = function(){
console.log( this.name +' lost' );
};
Player.prototype.die = function(){
this.lose();
this.enemy.win();
};
//接下来创建2 个玩家对象：
var player1 = new Player( '皮蛋' );
var player2 = new Player( '小乖' );
//给玩家相互设置敌人：
player1.enemy = player2;
player2.enemy = player1;

player1.die();// 输出：皮蛋 lost、小乖 won

　　如果增加玩家数量，在此段代码中，每个玩家对象都有两个属性，this.partners 和this.enemies，用来保存其他玩家对象的引用。当每个对象的状态发生改变，比如角色移动、吃到道具或者死亡时，都必须要显式地遍历通知其他对象。

var players = [];

function Player( name, teamColor ){
this.partners = []; // 队友列表
this.enemies = []; // 敌人列表
this.state = 'live'; // 玩家状态
this.name = name; // 角色名字
this.teamColor = teamColor; // 队伍颜色
};

Player.prototype.win = function(){ // 玩家团队胜利
console.log( 'winner: ' + this.name );
};
Player.prototype.lose = function(){ // 玩家团队失败
console.log( 'loser: ' + this.name );
};

Player.prototype.die = function(){ // 玩家死亡
var all_dead = true;

this.state = 'dead'; // 设置玩家状态为死亡
for ( var i = 0, partner; partner = this.partners[ i++ ]; ){ // 遍历队友列表
if ( partner.state !== 'dead' ){ // 如果还有一个队友没有死亡，则游戏还未失败
all_dead = false;
break;
}
}
if ( all_dead === true ){ // 如果队友全部死亡
this.lose(); // 通知自己游戏失败
for ( var i = 0, partner; partner = this.partners[ i++ ]; ){ // 通知所有队友玩家游戏失败
partner.lose();
}
for ( var i = 0, enemy; enemy = this.enemies[ i++ ]; ){ // 通知所有敌人游戏胜利
enemy.win();
}
}
};

var playerFactory = function( name, teamColor ){
var newPlayer = new Player( name, teamColor ); // 创建新玩家
for ( var i = 0, player; player = players[ i++ ]; ){ // 通知所有的玩家，有新角色加入
if ( player.teamColor === newPlayer.teamColor ){ // 如果是同一队的玩家
player.partners.push( newPlayer ); // 相互添加到队友列表
newPlayer.partners.push( player );
}else{
player.enemies.push( newPlayer ); // 相互添加到敌人列表
newPlayer.enemies.push( player );
}
}
players.push( newPlayer );
return newPlayer;
};

//红队：
var player1 = playerFactory( '皮蛋', 'red' ),
player2 = playerFactory( '小乖', 'red' ),
player3 = playerFactory( '宝宝', 'red' ),
player4 = playerFactory( '小强', 'red' );
//蓝队：
var player5 = playerFactory( '黑妞', 'blue' ),
player6 = playerFactory( '葱头', 'blue' ),
player7 = playerFactory( '胖墩', 'blue' ),
player8 = playerFactory( '海盗', 'blue' );

player1.die();
player2.die();
player4.die();
player3.die();

　　

　　使用中介者模式

　　首先仍然是定义Player 构造函数和player 对象的原型方法，在player 对象的这些原型方法中，不再负责具体的执行逻辑，而是把操作转交给中介者对象，我们把中介者对象命名为playerDirector：

function Player( name, teamColor ){
this.name = name; // 角色名字
this.teamColor = teamColor; // 队伍颜色
this.state = 'alive'; // 玩家生存状态
};

Player.prototype.win = function(){
console.log( this.name + ' won ' );
};

Player.prototype.lose = function(){
console.log( this.name +' lost' );
};
/*******************玩家死亡*****************/
Player.prototype.die = function(){
this.state = 'dead';
playerDirector.reciveMessage( 'playerDead', this ); // 给中介者发送消息，玩家死亡
};
/*******************移除玩家*****************/
Player.prototype.remove = function(){
playerDirector.reciveMessage( 'removePlayer', this ); // 给中介者发送消息，移除一个玩家
};
/*******************玩家换队*****************/
Player.prototype.changeTeam = function( color ){
playerDirector.reciveMessage( 'changeTeam', this, color ); // 给中介者发送消息，玩家换队
};

　　再继续改写之前创建玩家对象的工厂函数，可以看到，因为工厂函数里不再需要给创建的玩家对象设置队友和敌人，这个工厂函数几乎失去了工厂的意义：

var playerFactory = function( name, teamColor ){
var newPlayer = new Player( name, teamColor ); // 创造一个新的玩家对象
playerDirector.reciveMessage( 'addPlayer', newPlayer ); // 给中介者发送消息，新增玩家
return newPlayer;
};

　　最后，我们需要实现这个中介者playerDirector 对象，一般有以下两种方式。

利用发布—订阅模式。将playerDirector 实现为订阅者，各player 作为发布者，一旦player的状态发生改变，便推送消息给playerDirector，playerDirector 处理消息后将反馈发送给其他player。

在playerDirector 中开放一些接收消息的接口，各player 可以直接调用该接口来给playerDirector 发送消息，player 只需传递一个参数给playerDirector，这个参数的目的是使playerDirector 可以识别发送者。同样，playerDirector 接收到消息之后会将处理结果反馈给其他player。

　　这两种方式的实现没什么本质上的区别。在这里我们使用第二种方式，playerDirector 开放一个对外暴露的接口reciveMessage，负责接收player 对象发送的消息，而player 对象发送消息的时候，总是把自身this 作为参数发送给playerDirector，以便playerDirector 识别消息来自于哪个玩家对象，代码如下：

var playerDirector= ( function(){
var players = {}, // 保存所有玩家
operations = {}; // 中介者可以执行的操作
/****************新增一个玩家***************************/
operations.addPlayer = function( player ){
var teamColor = player.teamColor; // 玩家的队伍颜色
players[ teamColor ] = players[ teamColor ] || []; // 如果该颜色的玩家还没有成立队伍，则新成立一个队伍
players[ teamColor ].push( player ); // 添加玩家进队伍
};
/****************移除一个玩家***************************/
operations.removePlayer = function( player ){
var teamColor = player.teamColor, // 玩家的队伍颜色
teamPlayers = players[ teamColor ] || []; // 该队伍所有成员
for ( var i = teamPlayers.length - 1; i >= 0; i-- ){ // 遍历删除
if ( teamPlayers[ i ] === player ){
teamPlayers.splice( i, 1 );
}
}
};
/****************玩家换队***************************/
operations.changeTeam = function( player, newTeamColor ){ // 玩家换队
operations.removePlayer( player ); // 从原队伍中删除
player.teamColor = newTeamColor; // 改变队伍颜色
operations.addPlayer( player ); // 增加到新队伍中
};
/****************玩家死亡***************************/
operations.playerDead = function( player ){ // 玩家死亡
var teamColor = player.teamColor,
teamPlayers = players[ teamColor ]; // 玩家所在队伍
var all_dead = true;
for ( var i = 0, player; player = teamPlayers[ i++ ]; ){
if ( player.state !== 'dead' ){
all_dead = false;
break;
}
}
if ( all_dead === true ){ // 全部死亡
for ( var i = 0, player; player = teamPlayers[ i++ ]; ){
player.lose(); // 本队所有玩家lose
}
for ( var color in players ){
if ( color !== teamColor ){
var teamPlayers = players[ color ]; // 其他队伍的玩家
for ( var i = 0, player; player = teamPlayers[ i++ ]; ){
player.win(); // 其他队伍所有玩家win
}
}
}
}
};

var reciveMessage = function(){
var message = Array.prototype.shift.call( arguments ); // arguments 的第一个参数为消息名称
operations[ message ].apply( this, arguments );
};

return {
reciveMessage: reciveMessage
}

})();

　　除了中介者本身，没有一个玩家知道其他任何玩家的存在，玩家与玩家之间的耦合关系已经完全解除，某个玩家的任何操作都不需要通知其他玩家，而只需要给中介者发送一个消息，中介者处理完消息之后会把处理结果反馈给其他的玩家对象。

二、中介者模式的例子——购买商品

　　假设我们正在编写一个手机购买的页面，在购买流程中，可以选择手机的颜色以及输入购买数量，同时页面中有两个展示区域，分别向用户展示刚刚选择好的颜色和数量。还有一个按钮动态显示下一步的操作，我们需要查询该颜色手机对应的库存，如果库存数量少于这次的购买数量，按钮将被禁用并且显示库存不足，反之按钮可以点击并且显示放入购物车。

<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="selectBox">
<label for="colorSelect">选择颜色:</label>
<select id="colorSelect">
<option value="">请选择</option>
<option value="red">红色</option>
<option value="blue">蓝色</option>
</select>
<label for="numberInput">输入购买数量:</label> <input type="text" id="numberInput"/>
</div>
<div class="infoBox">
<label for="colorInfo">您选择了颜色: </label><div id="colorInfo"></div><br/>
<label for="numberInfo">您输入了数量:</label> <div id="numberInfo"></div><br/>
</div>
<button id="nextBtn" disabled="true">请选择手机颜色和购买数量</button>

<script>
var colorSelect = document.getElementById( 'colorSelect' ),
numberInput = document.getElementById( 'numberInput' ),
colorInfo = document.getElementById( 'colorInfo' ),
numberInfo = document.getElementById( 'numberInfo' ),
nextBtn = document.getElementById( 'nextBtn' );
var goods = { // 手机库存
"red": 3,
"blue": 6
};

colorSelect.onchange = function(){
var color = this.value, // 颜色
number = numberInput.value, // 数量
stock = goods[ color ]; // 该颜色手机对应的当前库存

colorInfo.innerHTML = color;
if ( !color ){
nextBtn.disabled = true;
nextBtn.innerHTML = '请选择手机颜色';
return;
}
if ( ( ( number - 0 ) | 0 ) !== number - 0 ){ // 用户输入的购买数量是否为正整数
nextBtn.disabled = true;
nextBtn.innerHTML = '请输入正确的购买数量';
return;
}
if ( number > stock ){ // 当前选择数量没有超过库存量
nextBtn.disabled = true;
nextBtn.innerHTML = '库存不足';
return ;
}
nextBtn.disabled = false;
nextBtn.innerHTML = '放入购物车';
};

numberInput.oninput = function(){
var color = colorSelect.value, // 颜色
number = this.value, // 数量
stock = goods[ color ]; // 该颜色手机对应的当前库存

numberInfo.innerHTML = number;
if ( !color ){
nextBtn.disabled = true;
nextBtn.innerHTML = '请选择手机颜色';
return;
}
if ( ( ( number - 0 ) | 0 ) !== number - 0 ){ // 输入购买数量是否为正整数
nextBtn.disabled = true;
nextBtn.innerHTML = '请输入正确的购买数量';
return;
}
if ( number > stock ){ // 当前选择数量没有超过库存量
nextBtn.disabled = true;
nextBtn.innerHTML = '库存不足';
return ;
}
nextBtn.disabled = false;
nextBtn.innerHTML = '放入购物车';
};
</script>
</body>
</html>

　　假设页面中将新增另外一个下拉选择框，代表选择手机内存。现在我们需要计算颜色、内存和购买数量，来判断nextBtn 是显示库存不足还是放入购物车。

　　首先我们要增加两个HTML 节点，接下来修改表示存库的JSON 对象以及修改colorSelect 的onchange 事件函数，同样要改写numberInput 的事件相关代码，最后还要新增memorySelect 的onchange 事件函数。

<label for="memorySelect">选择内存:</label>
<select id="memorySelect">
<option value="">请选择</option>
<option value="32G">32G</option>
<option value="16G">16G</option>
</select>

<label for="memoryInfo">您选择了内存: </label><div id="memoryInfo"></div><br/>

<script>
//...
memorySelect = document.getElementById( 'memorySelect' ),
memoryInfo = document.getElementById( 'memoryInfo' ),
//...
　　　　　　　var goods = { // 手机库存
"red|32G": 3, // 红色32G，库存数量为3
"red|16G": 0,
"blue|32G": 1,
"blue|16G": 6
};

colorSelect.onchange = function(){
var color = this.value, // 颜色
memory = memorySelect.value, //内存
//...
if ( !memory ){
nextBtn.disabled = true;
nextBtn.innerHTML = '请选择内存大小';
return;
}
//...
};

　　　　numberInput.oninput = function(){
var color = colorSelect.value, // 颜色
memory = memorySelect.value, //内存
//...
if ( !memory ){
nextBtn.disabled = true;
nextBtn.innerHTML = '请选择内存大小';
return;
}
//...
};　　

memorySelect.onchange = function(){
var color = colorSelect.value, // 颜色
number = numberInput.value, // 数量
memory = this.value,
stock = goods[ color + '|' + memory ]; // 该颜色手机对应的当前库存
memoryInfo.innerHTML = memory;
if ( !color ){
nextBtn.disabled = true;
nextBtn.innerHTML = '请选择手机颜色';
return;
}
if ( !memory ){
nextBtn.disabled = true;
nextBtn.innerHTML = '请选择内存大小';
return;
}
if ( ( ( number - 0 ) | 0 ) !== number - 0 ){ // 输入购买数量是否为正整数
nextBtn.disabled = true;
nextBtn.innerHTML = '请输入正确的购买数量';
return;
}
if ( number > stock ){ // 当前选择数量没有超过库存量
nextBtn.disabled = true;
nextBtn.innerHTML = '库存不足';
return ;
}
nextBtn.disabled = false;
nextBtn.innerHTML = '放入购物车';
};
</script>

　　仅仅是增加一个内存的选择条件，就要改变如此多的代码，这是因为在目前的实现中，每个节点对象都是耦合在一起的，改变或者增加任何一个节点对象，都要通知到与其相关的对象。

使用中介者模式

　　现在我们来引入中介者对象，所有的节点对象只跟中介者通信。当下拉选择框colorSelect、memorySelect 和文本输入框numberInput 发生了事件行为时，它们仅仅通知中介者它们被改变了，同时把自身当作参数传入中介者，以便中介者辨别是谁发生了改变。剩下的所有事情都交给中介者对象来完成，这样一来，无论是修改还是新增节点，都只需要改动中介者对象里的代码。

<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="selectBox">
<label for="colorSelect">选择颜色:</label>
<select id="colorSelect">
<option value="">请选择</option>
<option value="red">红色</option>
<option value="blue">蓝色</option>
</select>
<label for="memorySelect">选择内存:</label>
<select id="memorySelect">
<option value="">请选择</option>
<option value="32G">32G</option>
<option value="16G">16G</option>
</select>
<label for="numberInput">输入购买数量:</label> <input type="text" id="numberInput"/>
</div>
<div class="infoBox">
<label for="colorInfo">您选择了颜色: </label><div id="colorInfo"></div><br/>
<label for="memoryInfo">您选择了内存:</label> <div id="memoryInfo"></div><br/>
<label for="numberInfo">您输入了数量:</label> <div id="numberInfo"></div><br/>
</div>
<button id="nextBtn" disabled="true">请选择手机颜色和购买数量</button>
<script>
var goods = { // 手机库存
"red|32G": 3,
"red|16G": 0,
"blue|32G": 1,
"blue|16G": 6
};
var mediator = (function(){
var colorSelect = document.getElementById( 'colorSelect' ),
memorySelect = document.getElementById( 'memorySelect' ),
numberInput = document.getElementById( 'numberInput' ),
colorInfo = document.getElementById( 'colorInfo' ),
memoryInfo = document.getElementById( 'memoryInfo' ),
numberInfo = document.getElementById( 'numberInfo' ),
nextBtn = document.getElementById( 'nextBtn' );

return {
changed: function( obj ){
var color = colorSelect.value, // 颜色
memory = memorySelect.value,// 内存
number = numberInput.value, // 数量
stock = goods[ color + '|' + memory ]; // 颜色和内存对应的手机库存数量
if ( obj === colorSelect ){ // 如果改变的是选择颜色下拉框
colorInfo.innerHTML = color;
}else if ( obj === memorySelect ){
memoryInfo.innerHTML = memory;
}else if ( obj === numberInput ){
numberInfo.innerHTML = number;
}

if ( !color ){
nextBtn.disabled = true;
nextBtn.innerHTML = '请选择手机颜色';
return;
}
if ( !memory ){
nextBtn.disabled = true;
nextBtn.innerHTML = '请选择内存大小';
return;
}
if ( ( ( number - 0 ) | 0 ) !== number - 0 || !number){ // 输入购买数量是否为正整数
nextBtn.disabled = true;
nextBtn.innerHTML = '请输入正确的购买数量';
return;
}
nextBtn.disabled = false;
nextBtn.innerHTML = '放入购物车';
}
}
})();
// 事件函数：
colorSelect.onchange = function(){
mediator.changed( this );
};
memorySelect.onchange = function(){
mediator.changed( this );
};
numberInput.oninput = function(){
mediator.changed( this );
};
</script>
</body>
</html>

　　某天我们又要新增一些跟需求相关的节点，比如CPU 型号，那我们只需要稍稍改动mediator 对象即可

var goods = { // 手机库存
"red|32G|800": 3, // 颜色red，内存32G，cpu800，对应库存数量为3
"red|16G|801": 0,
"blue|32G|800": 1,
"blue|16G|801": 6
};
var mediator = (function(){
// 略
var cpuSelect = document.getElementById( 'cpuSelect' );
return {
change: function(obj){
// 略
var cpu = cpuSelect.value,
stock = goods[ color + '|' + memory + '|' + cpu ];
if ( obj === cpuSelect ){
cpuInfo.innerHTML = cpu;
}
// 略
}
}
})();

　 三、小结

　　中介者模式使各个对象之间得以解耦，以中介者和对象之间的一对多关系取代了对象之间的网状多对多关系。各个对象只需关注自身功能的实现，对象之间的交互关系交给了中介者对象来实现和维护。

　　不过，中介者模式也存在一些缺点。其中，最大的缺点是系统中会新增一个中介者对象，因为对象之间交互的复杂性，转移成了中介者对象的复杂性，使得中介者对象经常是巨大的。中介者对象自身往往就是一个难以维护的对象。