在字典里檐薯，中介者是指“協(xié)助談判和解決沖突的中立方”。在模式設(shè)計(jì)里袍冷，中介者是一種行為設(shè)計(jì)模式磷醋，它允許我們公開一個(gè)統(tǒng)一的接口，系統(tǒng)不同部分可以通過該接口進(jìn)行通訊难裆。
也許一個(gè)對象可以和十個(gè)對象之間發(fā)生聯(lián)系子檀，十個(gè)對象之間有可以發(fā)生相互聯(lián)系镊掖，從而形成一張巨大的關(guān)系網(wǎng)，要想在這么復(fù)雜的關(guān)系網(wǎng)中理清關(guān)系不是一件容易的事情褂痰。
中介者模式就是要把對象之間的相互耦合關(guān)系解除亩进。通過增加一個(gè)中介者對象，每個(gè)對象都和中介者對象通訊缩歪，對象之間不直接發(fā)生聯(lián)系归薛。
中介者對象是的對象之間的網(wǎng)狀結(jié)構(gòu)變?yōu)橐粚Χ嗟年P(guān)系。
拿咸魚網(wǎng)來說匪蝙。以前如果我們有閑置的東西主籍，可以在小區(qū)的路上擺個(gè)攤子，這樣看到東西的鄰居可能會(huì)來買逛球∏г可是這種關(guān)系是十分不穩(wěn)定和復(fù)雜的，交易發(fā)生都有偶然性颤绕。
如果我們把閑置發(fā)布到咸魚幸海，那么發(fā)布者和購買者不會(huì)直接發(fā)生聯(lián)系。之間的關(guān)系都是通過咸魚來完成的奥务。這樣的模式就比直接交易便利的多物独。
參考《javascript設(shè)計(jì)模式與開發(fā)實(shí)踐》第14章÷仍幔《javascript設(shè)計(jì)模式》動(dòng)物書 第9章挡篓。9.6
看一個(gè)簡單的例子
這是一個(gè)捉對廝殺的游戲。
function Player( name ){ //玩家構(gòu)造函數(shù)
this.name = name //玩家名字
this.enemy = null; // 敵人
};
Player.prototype.win = function(){ //獲勝函數(shù)
console.log( this.name + ' won ' );
};
Player.prototype.lose = function(){//失敗函數(shù)
console.log( this.name +' lost' );
};
Player.prototype.die = function(){//失敗函數(shù)
this.lose();
this.enemy.win();
};
//接下來創(chuàng)建2 個(gè)玩家對象：
var player1 = new Player( '皮蛋' );
var player2 = new Player( '小乖' );
//給玩家相互設(shè)置敵人：
player1.enemy = player2;
player2.enemy = player1;
player1.die();// 輸出：皮蛋 lost帚称、小乖 won
這樣兩個(gè)對象之間的相互作用還是比較簡單的官研。
當(dāng)增加玩家組隊(duì)的時(shí)候，就比較復(fù)雜了世杀，看看依照上面的思路的代碼
var players = []; //玩家的數(shù)組阀参，使用的時(shí)候是二維數(shù)組，一維是隊(duì)顏色
function Player( name, teamColor ){//構(gòu)造函數(shù)
this.partners = []; // 隊(duì)友列表
this.enemies = []; // 敵人列表
this.state = 'live'; // 玩家狀態(tài)
this.name = name; // 角色名字
this.teamColor = teamColor; // 隊(duì)伍顏色
};
Player.prototype.win = function(){ // 玩家團(tuán)隊(duì)勝利
console.log( 'winner: ' + this.name );
};
Player.prototype.lose = function(){ // 玩家團(tuán)隊(duì)失敗
console.log( 'loser: ' + this.name );
};
Player.prototype.die = function(){ // 玩家死亡
var all_dead = true;
this.state = 'dead'; // 設(shè)置玩家狀態(tài)為死亡瞻坝，標(biāo)記變量
for ( var i = 0, partner; partner = this.partners[ i++ ]; ){
// 遍歷隊(duì)友列表
if ( partner.state !== 'dead' ){
// 如果還有一個(gè)隊(duì)友沒有死亡蛛壳，則游戲還未失敗
all_dead = false;
break;
}
}
if ( all_dead === true ){ // 如果隊(duì)友全部死亡
this.lose(); // 通知自己游戲失敗
for ( var i = 0, partner; partner = this.partners[ i++ ]; ){
// 通知所有隊(duì)友玩家游戲失敗
partner.lose();
}
for ( var i = 0, enemy; enemy = this.enemies[ i++ ]; ){
// 通知所有敵人游戲勝利
enemy.win();
}
}
};
var playerFactory = function( name, teamColor ){//玩家對象工廠
var newPlayer = new Player( name, teamColor );
// 創(chuàng)建新玩家
for ( var i = 0, player; player = players[ i++ ]; ){
// 通知所有的玩家，有新角色加入
if ( player.teamColor === newPlayer.teamColor ){
// 如果是同一隊(duì)的玩家
player.partners.push( newPlayer );
// 相互添加到隊(duì)友列表
newPlayer.partners.push( player );
}else{
player.enemies.push( newPlayer );
// 相互添加到敵人列表
newPlayer.enemies.push( player );
}
}
players.push( newPlayer );
return newPlayer;
};
//紅隊(duì)：4個(gè)玩家
var player1 = playerFactory( '皮蛋', 'red' ),
player2 = playerFactory( '小乖', 'red' ),
player3 = playerFactory( '寶寶', 'red' ),
player4 = playerFactory( '小強(qiáng)', 'red' );
//藍(lán)隊(duì)：4個(gè)玩家
var player5 = playerFactory( '黑妞', 'blue' ),
player6 = playerFactory( '蔥頭', 'blue' ),
player7 = playerFactory( '胖墩', 'blue' ),
player8 = playerFactory( '海盜', 'blue' );
player1.die();
player2.die();
player4.die();
player3.die();
以上的代碼就有點(diǎn)復(fù)雜了所刀。當(dāng)玩家失敗(死亡)以后要遍歷其他隊(duì)友等等衙荐。加入隊(duì)伍的時(shí)候也比較麻煩，要相互確認(rèn)浮创。隊(duì)友之間的相互交叉變化很麻煩忧吟。
下面看看中介者模式改造的代碼。
重要的是添加了playerDirector這個(gè)中介者對象斩披。
playerDirector中介者對象中添加接口溜族，receiveMessage()通知中介者來進(jìn)行相關(guān)操作讹俊。可以先在中介者對象中看看這個(gè)方法
reciveMessage( 'playerDead', this )煌抒；第一個(gè)參數(shù)是通知中介者的方法仍劈。第二個(gè)參數(shù)就是創(chuàng)建的玩家對象。
/********************中介者模式********************/
function Player( name, teamColor ){//構(gòu)造函數(shù)
this.name = name; // 角色名字
this.teamColor = teamColor; // 隊(duì)伍顏色寡壮，玩家數(shù)組的第一維
this.state = 'alive'; // 玩家生存狀態(tài)
};
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 );
// 給中介者發(fā)送消息贩疙，玩家死亡
};
/*******************移除玩家*****************/
Player.prototype.remove = function(){
playerDirector.reciveMessage( 'removePlayer', this );
// 給中介者發(fā)送消息，移除一個(gè)玩家
};
/*******************玩家換隊(duì)*****************/
Player.prototype.changeTeam = function( color ){
playerDirector.reciveMessage( 'changeTeam', this, color );
// 給中介者發(fā)送消息况既，玩家換隊(duì)
};
var playerDirector= ( function(){ //中介者構(gòu)造函數(shù)
var players = {}, // 保存所有玩家
operations = {}; // 中介者可以執(zhí)行的操作
/****************新增一個(gè)玩家***************************/
operations.addPlayer = function( player ){
var teamColor = player.teamColor; // 玩家的隊(duì)伍顏色
players[ teamColor ] = players[ teamColor ] || [];
// 如果該顏色的玩家還沒有成立隊(duì)伍这溅，則創(chuàng)建
players[ teamColor ].push( player ); // 添加玩家進(jìn)隊(duì)伍
};
/****************移除一個(gè)玩家***************************/
operations.removePlayer = function( player ){
var teamColor = player.teamColor, // 玩家的隊(duì)伍顏色
teamPlayers = players[ teamColor ] || []; // 該隊(duì)伍所有成員
for ( var i = teamPlayers.length - 1; i >= 0; i-- ){ // 遍歷刪除
if ( teamPlayers[ i ] === player ){
teamPlayers.splice( i, 1 );
}
}
};
/****************玩家換隊(duì)***************************/
operations.changeTeam = function( player, newTeamColor ){ // 玩家換隊(duì)
operations.removePlayer( player ); // 從原隊(duì)伍中刪除
player.teamColor = newTeamColor; // 改變隊(duì)伍顏色
operations.addPlayer( player ); // 增加到新隊(duì)伍中
};
operations.playerDead = function( player ){ // 玩家死亡
var teamColor = player.teamColor,
teamPlayers = players[ teamColor ]; // 玩家所在隊(duì)伍
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(); // 本隊(duì)所有玩家lose
}
for ( var color in players ){
if ( color !== teamColor ){
var teamPlayers = players[ color ];
// 其他隊(duì)伍的玩家
for ( var i = 0, player; player = teamPlayers[ i++ ]; ){
player.win(); // 其他隊(duì)伍所有玩家win
}
}
}
}
};
var reciveMessage = function(){
//被中介者中使用通知中介者的方法
var message = Array.prototype.shift.call( arguments ); // arguments 的第一個(gè)參數(shù)為消息名稱
operations[ message ].apply( this, arguments );
};
return {
reciveMessage: reciveMessage//揭示模式的方法
}
})();
// 紅隊(duì)：
var player1 = playerFactory( '皮蛋', 'red' ),
player2 = playerFactory( '小乖', 'red' ),
player3 = playerFactory( '寶寶', 'red' ),
player4 = playerFactory( '小強(qiáng)', 'red' );
// 藍(lán)隊(duì)：
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();
中介者模式中，使用者之間是不發(fā)生任何關(guān)系的棒仍。發(fā)生任何的操作都是通知中介者悲靴。中介者再通知其他使用者。
使用者之間的耦合解除了莫其。
數(shù)組的使用上靈活度很大要注意对竣，其他的地方還是很好理解的。
我感覺react組件和redux模塊的相互關(guān)系就是中介者模式榜配，您覺得呢？
