学习JavaScript设计模式之中介者模式

一、定义
面向对象设计鼓励将行为分布到各个对象中，把对象划分成更小的粒度，有助于增强对象的可复用性。但由于这些细粒度对象之间的联系激增，又可能反过来降低它们的可复用性。
中介者模式的作用就是解除对象与对象之间的紧耦合关系。
二、示例：购买商品

假设我们正在开发一个购买手机的页面，购买流程中，可以选择手机颜色以及输入购买数量，同时页面中可以对应展示输入内容。还有一个按钮动态显示下一步操作（该颜色库存量充足，显示下一步；否则显示库存不足）。

<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程序设计有所帮助。