学习JavaScript设计模式之中介者模式
一、定义
面向对象设计鼓励将行为分布到各个对象中，把对象划分成更小的粒度，有助于增强对象的可复用性。但由于这些细粒度对象之间的联系激增，又可能反过来降低它们的可复用性。
中介者模式的作用就是解除对象与对象之间的紧耦合关系。
二、示例：购买商品
- 假设我们正在开发一个购买手机的页面，购买流程中，可以选择手机颜色以及输入购买数量，同时页面中可以对应展示输入内容。还有一个按钮动态显示下一步操作（该颜色库存量充足，显示下一步；否则显示库存不足）。
<div> <span>请选择颜色</span> <selectid="selColor"> <optionvalue="roseGold">玫瑰金</option> <optionvalue="luxuryGold">土豪金</option> </select> </div> <div> <span>请输入购买数量：</span> <inputtype="text"id="selNum"/> </div> <div> <span>您选择的颜色为：</span><strongid="conColor"></strong> <span>您选择的数量为：</span><strongid="conNum"></strong> </div> <buttonid="nextBtn">加入购物车</button>
//库存量
vargoods={
roseGold:10,
luxuryGold:10
};
varcolorSelect=document.getElementById("selColor"),
numberInput=document.getElementById("selNum"),
colorInfo=document.getElementById("conColor"),
numberInfo=document.getElementById("conNum"),
nextBtn=document.getElementById("nextBtn");
colorSelect.onchange=function(){
varcolor=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> <selectid="selColor"> <optionvalue="roseGold">玫瑰金</option> <optionvalue="luxuryGold">土豪金</option> </select> </div> <div> <span>请选择内存：</span> <selectid="selMemory"> <optionvalue="16G">16G</option> <optionvalue="64G">64G</option> </select> </div> <div> <span>请输入购买数量：</span> <inputtype="text"id="selNum"/> </div> <div> <span>您选择的颜色为：</span><strongid="conColor"></strong> <span>您选择的内存为：</span><strongid="conMemory"></strong> <span>您选择的数量为：</span><strongid="conNum"></strong> </div> <buttonid="nextBtn">加入购物车</button>
//库存量
vargoods={
"roseGold|16G":10,
"roseGold|32G":10,
"luxuryGold|16G":10,
"luxuryGold|32G":10
};
varcolorSelect=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");
varmediator=(function(){
return{
changed:function(obj){
varcolor=colorSelect.value,//颜色
memory=memorySelect.value,//内存
number=+numberInput.value,//数量
stock=goods[color+'|'+memory];//对应颜色的库存量
if(obj===colorSelect){
colorInfo.innerHTML=color;
}elseif(obj===memorySelect){
memeryInfo.innerHTML=memory;
}elseif(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程序设计有所帮助。