一、定義
面向對象設計鼓勵將行為分布到各個對象中，把對象劃分成更小的粒度，有助于增強對象的可復用性。但由于這些細粒度對象之間的聯系激增，又可能反過來降低它們的可復用性。
中介者模式的作用就是解除對象與對象之間的緊耦合關系。
二、示例：購買商品
<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程序設計有所幫助。
新聞熱點
疑難解答
