JavaScript設計模式之中介者模式詳解

2022-08-09 22:00:36

中介者模式

在我們生活的世界中，每個人每個物體之間都會產生一些錯綜複雜的聯絡。在應用程式裡也是一樣，程式由大大小小的單一物件組成，所有這些物件都按照某種關係和規則來通訊。

平時我們大概能記住 10 個朋友的電話、30 家餐館的位置。在程式裡，也許一個物件會和其他 10 個物件打交道，所以它會保持 10 個物件的參照。當程式的規模增大，物件會越來越多，它們之間的關係也越來越複雜，難免會形成網狀的交叉參照。當我們改變或刪除其中一個物件的時候，很可能需要通知所有參照到它的物件。這樣一來，就像在心臟旁邊拆掉一根毛細血管一般，即使一點很小的修改也必須小心翼翼，如下圖所示。

物件導向設計鼓勵將行為分佈到各個物件中，把物件劃分成更小的粒度，有助於增強物件的可複用性，但由於這些細粒度物件之間的聯絡激增，又有可能會反過來降低它們的可複用性。

中介者模式的作用就是解除物件與物件之間的緊耦合關係。增加一箇中介者物件後，所有的相關物件都通過中介者物件來通訊，而不是互相參照，所以當一個物件發生改變時，只需要通知中介者物件即可。中介者使各物件之間耦合鬆散，而且可以獨立地改變它們之間的互動。中介者模式使網狀的多對多關係變成了相對簡單的一對多關係，如下圖所示。

在前面的圖中，如果物件 A 發生了改變，則需要同時通知跟 A 發生參照關係的 B、D、E、F 這 4 個物件；而在上圖中，使用中介者模式改進之後，A 發生改變時則只需要通知這個中介者物件即可。

現實中的中介者

在現實生活中也有很多中介者的例子，例如機場指揮塔。

中介者也被稱為調停者，我們想象一下機場的指揮塔，如果沒有指揮塔的存在，每一架飛機要和方圓 100 公里內的所有飛機通訊，才能確定航線以及飛行狀況，後果是不可想象的。現實中的情況是，每架飛機都只需要和指揮塔通訊。指揮塔作為調停者，知道每一架飛機的飛行狀況，所以它可以安排所有飛機的起降時間，及時做出航線調整。

下面我們來看中介者模式在下面這個案例中的應用。

中介者模式的例子

泡泡堂遊戲

大家可能都還記得泡泡堂遊戲，現在我們來一起回顧這個遊戲，假設在遊戲之初只支援兩個玩家同時進行對戰。

先定義一個玩家建構函式，它有 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 個玩家物件：

const player1 = new Player('玩家一');
const player2 = new Player('玩家二');

給玩家相互設定敵人：

player1.enemy = player2; 
player2.enemy = player1;

當玩家 player1 被泡泡炸死的時候，只需要呼叫這一句程式碼便完成了一局遊戲：

player1.die();// 輸出：玩家一 lost、玩家二 won

然而真正的泡泡堂遊戲至多可以有 8 個玩家，並分成紅藍兩隊進行遊戲。

為遊戲增加隊伍

現在我們改進一下游戲。因為玩家數量變多，用下面的方式來設定隊友和敵人無疑很低效：

player1.partners = [player1, player2, player3, player4];
player1.enemies = [player5, player6, player7, player8];
Player5.partners = [player5, player6, player7, player8];
Player5.enemies = [player1, player2, player3, player4];

所以我們定義一個陣列 players 來儲存所有的玩家，在建立玩家之後，迴圈 players 來給每個玩家設定隊友和敵人:

const players = [];

再改寫建構函式 Player，使每個玩家物件都增加一些屬性，分別是隊友列表、敵人列表、玩家當前狀態、角色名字以及玩家所在的隊伍顏色：

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 () { // 玩家死亡
	let all_dead = true;
	this.state = 'dead'; // 設定玩家狀態為死亡
	for (let i = 0; i < this.partners.length; i++) { // 遍歷隊友列表
		if (this.partners[i].state !== 'dead') { // 如果還有一個隊友沒有死亡，則遊戲還未失敗
			all_dead = false;
			break;
		}
	}
	if (all_dead === true) { // 如果隊友全部死亡
		this.lose(); // 通知自己遊戲失敗
		for (let i = 0; i < this.partners.length; i++) { // 通知所有隊友玩家遊戲失敗
			this.partners[i].lose();
		}
		for (let i = 0; i < this.enemies.length; i++) { // 通知所有敵人遊戲勝利
			this.enemies[i].win();
		}
	}
};

最後定義一個工廠來建立玩家：

const playerFactory = function (name, teamColor) {
	const newPlayer = new Player(name, teamColor); // 建立新玩家
	for (let i = 0; i < players.length; i++) { // 通知所有的玩家，有新角色加入
		if (players[i].teamColor === newPlayer.teamColor) { // 如果是同一隊的玩家
			players[i].partners.push(newPlayer); // 相互新增到隊友列表
			newPlayer.partners.push(players[i]);
		} else {
			players[i].enemies.push(newPlayer); // 相互新增到敵人列表
			newPlayer.enemies.push(players[i]);
		}
	}
	players.push(newPlayer);
	return newPlayer;
};

現在來感受一下, 用這段程式碼建立 8 個玩家：

//紅隊：
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();

結果如下：

loser: 寶寶
loser: 皮蛋
loser: 小乖
loser: 小強
winner: 黑妞
winner: 蔥頭
winner: 胖墩
winner: 海盜

玩家增多帶來的困擾

現在我們已經可以隨意地為遊戲增加玩家或者隊伍，但問題是，每個玩家和其他玩家都是緊緊耦合在一起的。在此段程式碼中，每個玩家物件都有兩個屬性，this.partners 和 this.enemies，用來儲存其他玩家物件的參照。當每個物件的狀態發生改變，比如角色移動、吃到道具或者死亡時，都必須要顯式地遍歷通知其他物件。

在這個例子中只建立了 8 個玩家，或許還沒有對你產生足夠多的困擾，而如果在一個大型網路遊戲中，畫面裡有成百上千個玩家，幾十支隊伍在互相廝殺。如果有一個玩家掉線，必須從所有其他玩家的隊友列表和敵人列表中都移除這個玩家。遊戲也許還有解除隊伍和新增到別的隊伍的功能，紅色玩家可以突然變成藍色玩家，這就不再僅僅是迴圈能夠解決的問題了。面對這樣的需求，我們上面的程式碼可以迅速進入投降模式。

用中介者模式改造泡泡堂遊戲

現在我們開始用中介者模式來改造上面的泡泡堂遊戲，改造後的玩家物件和中介者的關係如下圖所示。

首先仍然是定義 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); // 給中介者傳送訊息，玩家換隊
};

再繼續改寫之前建立玩家物件的工廠函數，可以看到，因為工廠函數裡不再需要給建立的玩家物件設定隊友和敵人，這個工廠函數幾乎失去了工廠的意義：

const playerFactory = function (name, teamColor) {
	const 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 識別訊息來自於哪個玩家物件，程式碼如下：

const playerDirector = (function () {
	const players = {}, // 儲存所有玩家
		operations = {}; // 中介者可以執行的操作
	/**
	 * 新增一個玩家
	 * @param {Player} player 玩家
	 */
	operations.addPlayer = function (player) {
		const teamColor = player.teamColor; // 玩家的隊伍顏色
		// 如果該顏色的玩家還沒有成立隊伍，則新成立一個隊伍
		players[teamColor] = players[teamColor] || [];
		players[teamColor].push(player); // 新增玩家進隊伍
	};
	/**
	 * 移除一個玩家
	 * @param {Player} player 玩家
	 */
	operations.removePlayer = function (player) {
		const teamColor = player.teamColor, // 玩家的隊伍顏色
			teamPlayers = players[teamColor] || []; // 該隊伍所有成員
		for (let i = teamPlayers.length - 1; i >= 0; i--) { // 遍歷刪除
			if (teamPlayers[i] === player) {
				teamPlayers.splice(i, 1);
			}
		}
	};
	/**
	 * 玩家換隊
	 * @param {Player} player 玩家
	 * @param {string} newTeamColor 隊伍顏色
	 */
	operations.changeTeam = function (player, newTeamColor) { // 玩家換隊
		operations.removePlayer(player); // 從原隊伍中刪除
		player.teamColor = newTeamColor; // 改變隊伍顏色
		operations.addPlayer(player); // 增加到新隊伍中
	};
	/**
	 * 玩家死亡
	 * @param {Player} player 玩家
	 */
	operations.playerDead = function (player) {
		const teamColor = player.teamColor,
			teamPlayers = players[teamColor]; // 玩家所在隊伍
		let all_dead = true;
		for (let i = 0; i < teamPlayers.length; i++) {
			if (teamPlayers[i].state !== 'dead') {
				all_dead = false;
				break;
			}
		}
		if (all_dead) { // 全部死亡
			for (let i = 0; i < teamPlayers.length; i++) {
				teamPlayers[i].lose(); // 本隊所有玩家 lose 
			}
			for (const color in players) {
				if (color !== teamColor) {
					const teamPlayers = players[color]; // 其他隊伍的玩家
					for (let i = 0; i < teamPlayers.length; i++) {
						teamPlayers[i].win(); // 其他隊伍所有玩家 win 
					}
				}
			}
		}
	};
	const reciveMessage = function () {
		// arguments 的第一個引數為訊息名稱
		const message = Array.prototype.shift.call(arguments); 
		operations[message].apply(this, arguments);
	};
	return {
		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();

執行結果如下。

皮蛋 lost
小乖 lost
寶寶 lost
小強 lost
黑妞 won
蔥頭 won
胖墩 won
海盜 won

假設皮蛋和小乖掉線

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

則結果如下。

寶寶 lost
小強 lost
黑妞 won
蔥頭 won
胖墩 won
海盜 won

假設皮蛋從紅隊叛變到藍隊

player1.changeTeam( 'blue' ); 
player2.die(); 
player3.die(); 
player4.die();

則結果如下。

小乖 lost
寶寶 lost
小強 lost
黑妞 won
蔥頭 won
胖墩 won
海盜 won
皮蛋 won

小結

中介者模式是迎合迪米特法則的一種實現。迪米特法則也叫最少知識原則，是指一個物件應該儘可能少地瞭解另外的物件（類似不和陌生人說話）。如果物件之間的耦合性太高，一個物件發生改變之後，難免會影響到其他的物件，跟“城門失火，殃及池魚”的道理是一樣的。而在中介者模式裡，物件之間幾乎不知道彼此的存在，它們只能通過中介者物件來互相影響對方。

因此，中介者模式使各個物件之間得以解耦，以中介者和物件之間的一對多關係取代了物件之間的網狀多對多關係。各個物件只需關注自身功能的實現，物件之間的互動關係交給了中介者物件來實現和維護。

不過，中介者模式也存在一些缺點。其中，最大的缺點是系統中會新增一箇中介者物件，因為物件之間互動的複雜性，轉移成了中介者物件的複雜性，使得中介者物件經常是巨大的。中介者物件自身往往就是一個難以維護的物件。

中介者模式可以非常方便地對模組或者物件進行解耦，但物件之間並非一定需要解耦。在實際專案中，模組或物件之間有一些依賴關係是很正常的。畢竟我們寫程式是為了快速完成專案交付生產，而不是堆砌模式和過度設計。關鍵就在於如何去衡量物件之間的耦合程度。一般來說，如果物件之間的複雜耦合確實導致呼叫和維護出現了困難，而且這些耦合度隨專案的變化呈指數增長曲線，那我們就可以考慮用中介者模式來重構程式碼。

到此這篇關於JavaScript設計模式之中介者模式詳解的文章就介紹到這了,更多相關JS中介者模式內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！