面向对象设计鼓励将行为分布到各个对象中，把对象划分成更小的粒度，有助于增强对象的可复用性。但由于这些细粒度对象之间的联系激增，又可能反过来降低它们的可复用性。
中介者模式的作用就是解除对象与对象之间的紧耦合关系。
二、示例：购买商品
假设我们正在开发一个购买手机的页面，购买流程中，可以选择手机颜色以及输入购买数量，同时页面中可以对应展示输入内容。还有一个按钮动态显示下一步操作（该颜色库存量充足，显示下一步；否则显示库存不足）。
<div> <span>请选择颜色</span> <select> <option value="roseGold">玫瑰金</option> <option value="luxuryGold">土豪金</option> </select> </div> <div> <span>请输入购买数量：</span> <input type="text" /> </div> <div> <span>您选择的颜色为：</span><strong></strong> <span>您选择的数量为：</span><strong></strong> </div> <button>加入购物车</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> <option value="roseGold">玫瑰金</option> <option value="luxuryGold">土豪金</option> </select> </div> <div> <span>请选择内存：</span> <select> <option value="16G">16G</option> <option value="64G">64G</option> </select> </div> <div> <span>请输入购买数量：</span> <input type="text" /> </div> <div> <span>您选择的颜色为：</span><strong></strong> <span>您选择的内存为：</span><strong></strong> <span>您选择的数量为：</span><strong></strong> </div> <button>加入购物车</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); }