在字典里,中介者是指“协助谈判和解决冲突的中立方”。在模式设计里,中介者是一种行为设计模式,它允许我们公开一个统一的接口,系统不同部分可以通过该接口进行通讯。
也许一个对象可以和十个对象之间发生联系,十个对象之间有可以发生相互联系,从而形成一张巨大的关系网,要想在这么复杂的关系网中理清关系不是一件容易的事情。
中介者模式就是要把对象之间的相互耦合关系解除。通过增加一个中介者对象,每个对象都和中介者对象通讯,对象之间不直接发生联系。
中介者对象是的对象之间的网状结构变为一对多的关系。
拿咸鱼网来说。以前如果我们有闲置的东西,可以在小区的路上摆个摊子,这样看到东西的邻居可能会来买。可是这种关系是十分不稳定和复杂的,交易发生都有偶然性。
如果我们把闲置发布到咸鱼,那么发布者和购买者不会直接发生联系。之间的关系都是通过咸鱼来完成的。这样的模式就比直接交易便利的多。
参考《javascript设计模式与开发实践》第14章。《javascript设计模式》动物书 第9章。9.6
看一个简单的例子
这是一个捉对厮杀的游戏。
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
这样两个对象之间的相互作用还是比较简单的。
当增加玩家组队的时候,就比较复杂了,看看依照上面的思路的代码
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;
};
//红队:4个玩家
var player1 = playerFactory( '皮蛋', 'red' ),
player2 = playerFactory( '小乖', 'red' ),
player3 = playerFactory( '宝宝', 'red' ),
player4 = playerFactory( '小强', 'red' );
//蓝队:4个玩家
var player5 = playerFactory( '黑妞', 'blue' ),
player6 = playerFactory( '葱头', 'blue' ),
player7 = playerFactory( '胖墩', 'blue' ),
player8 = playerFactory( '海盗', 'blue' );
player1.die();
player2.die();
player4.die();
player3.die();
以上的代码就有点复杂了。当玩家失败(死亡)以后要遍历其他队友等等。加入队伍的时候也比较麻烦,要相互确认。队友之间的相互交叉变化很麻烦。
下面看看中介者模式改造的代码。
重要的是添加了playerDirector这个中介者对象。
playerDirector中介者对象中添加接口,receiveMessage()通知中介者来进行相关操作。可以先在中介者对象中看看这个方法
reciveMessage( 'playerDead', this );第一个参数是通知中介者的方法。第二个参数就是创建的玩家对象。
/********************中介者模式********************/
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 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//揭示模式的方法
}
})();
// 红队:
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();
player3.die();
player4.die();
player1.remove();
player2.remove();
player3.die();
player4.die();
player1.changeTeam( 'blue' );
player2.die();
player3.die();
player4.die();
中介者模式中,使用者之间是不发生任何关系的。发生任何的操作都是通知中介者。中介者再通知其他使用者。
使用者之间的耦合解除了。
数组的使用上灵活度很大要注意,其他的地方还是很好理解的。
我感觉react组件和redux模块的相互关系就是中介者模式,您觉得呢?