一、定義
物件導向設計鼓勵將行為分佈到各個物件中，把物件分成更小的粒度，有助於增強物件的可重複使用性。但由於這些細粒度物件之間的聯繫激增，又可能反過來降低它們的可重複使用性。
中介者模式的作用就是解除物件與物件之間的緊密耦合關係。
二、範例：購買商品
<div>
<span>请选择颜色</span>
<select id="selColor">
<option value="roseGold">玫瑰金</option>
<option value="luxuryGold">土豪金</option>
</select>
</div>
<div>
<span>请输入购买数量：</span>
<input type="text" id="selNum" />
</div>
<div>
<span>您选择的颜色为：</span><strong id="conColor"></strong>
<span>您选择的数量为：</span><strong id="conNum"></strong>
</div>
<button id="nextBtn">加入购物车</button>
// 库存量
var goods = {
roseGold: 10,
luxuryGold: 10
};
var colorSelect = document.getElementById("selColor"),
numberInput = document.getElementById("selNum"),
colorInfo = document.getElementById("conColor"),
numberInfo = document.getElementById("conNum"),
nextBtn = document.getElementById("nextBtn");
colorSelect.onchange = function() {
var color = colorSelect.value, // 颜色
number = +numberInput.value, // 数量
stock = goods[color]; // 对应颜色的库存量
colorInfo.innerHTML = color;
if(!color) {
nextBtn.disabled = true;
nextBtn.innerHTML = "请选择手机颜色";
return;
}
if(!number || (((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 = "加入购物车";
};
/* 购买数量做同样处理 */
當頁面中新增加另一個下拉列錶框，代表手機內存，上述程式碼改變面很大。
三、引入中介模式
所有的節點物件只跟中介者通訊。
當下拉選擇框selColor、selMemory亦或文本框selNum發生了事件行為時，僅通知中介者它們被改變了，同時把自己當做參數傳入中介者，以便中介者辨別是誰發生了改變，剩下的事情交給中介者對象來完成。
<div>
<span>请选择颜色：</span>
<select id="selColor">
<option value="roseGold">玫瑰金</option>
<option value="luxuryGold">土豪金</option>
</select>
</div>
<div>
<span>请选择内存：</span>
<select id="selMemory">
<option value="16G">16G</option>
<option value="64G">64G</option>
</select>
</div>
<div>
<span>请输入购买数量：</span>
<input type="text" id="selNum" />
</div>
<div>
<span>您选择的颜色为：</span><strong id="conColor"></strong>
<span>您选择的内存为：</span><strong id="conMemory"></strong>
<span>您选择的数量为：</span><strong id="conNum"></strong>
</div>
<button id="nextBtn">加入购物车</button>
// 库存量
var goods = {
"roseGold|16G": 10,
"roseGold|32G": 10,
"luxuryGold|16G": 10,
"luxuryGold|32G": 10
};
var colorSelect = document.getElementById("selColor"),
memorySelect = document.getElementById("selMemory"),
numberInput = document.getElementById("selNum"),
colorInfo = document.getElementById("conColor"),
memeryInfo = document.getElementById("conMemory"),
numberInfo = document.getElementById("conNum"),
nextBtn = document.getElementById("nextBtn");
var mediator = (function() {
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) {
memeryInfo.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 || (((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 = "加入购物车";
}
};
})();
// 事件函数
colorSelect.onchange = function() {
mediator.changed(this);
};
memorySelect.onchange = function() {
mediator.changed(this);
};
numberInput.oninput = function() {
mediator.changed(this);
}
中介者模式是迎合迪米特法則的一種實現。 迪米特法則也叫最少知識原則，是指一個對象應該盡可能少地了解另外的對象。避免「城門失火，殃及魚池」。
缺點：最大的缺點是系統中會增加一個中介對象，因為對象之間互動的複雜性，轉移成了中介對象的複雜性，使得中介者物件經常是巨大的，很難維護。
一般來說，如果物件之間的複雜耦合確實導致呼叫和維護出現了困難，而且這些耦合度隨項目的變化呈指數增長，那麼我們可以考慮用中介者模式來重構程式碼。
希望本文所述對大家學習javascript程式設計有所幫助。
