轻松掌握JavaScript中介者模式
中介者模式的作用就是解除对象与对象之间的紧耦合关系，它也称‘调停者'。所有的对象都通过中介者对象来通信，而不是相互引用，所以当一个对象发生改变时，只需要通知中介者即可。
如：机场的指挥塔，每架飞机都只需要和指挥塔通信即可，指挥塔知道每架飞机的飞行状况，可以安排所有起降时间，调整航线等
中介者模式符合迪米特法则，即最少知识原则，指一个对象应该尽可能少地了解另外的对象。如果对象之间的耦合性太高，则改变一个对象，会牵动很多对象，难于维护。当对象耦合很紧时，要修改一个对象而不影响其它的对象是很困难的。
如果对象之间的复杂耦合确实导致调用和维护出现了困难，而且这些耦合度随项目的变化呈指数增长，那我们就可以考虑用中介者模式来重构代码！中介者通过解耦来提升代码的可维护性。
例子1：游戏
玩家对象是通过Player()构造函数来创建的，有自己的points和name属性。原型上的play()方法负责给自己加一分然后通知中介者：
functionPlayer(name){
this.points=0;
this.name=name;
}
Player.prototype.play=function(){
this.points+=1;
mediator.played();
};
scoreboard对象（计分板）有一个update()方法，它会在每次玩家玩完后被中介者调用。计分析根本不知道玩家的任何信息，也不保存分数，它只负责显示中介者给过来的分数：
varscoreboard={
element:document.getElementById('results'),
update:function(score){
vari,msg='';
for(iinscore){
if(score.hasOwnProperty(i)){
msg+='<p><strong>'+i+'<\/strong>:';
msg+=score[i];
msg+='<\/p>';
}
}
this.element.innerHTML=msg;
}
};
现在我们来看一下mediator对象（中介者）。在游戏初始化的时候，在setup()方法中创建游戏者，然后放后players属性以便后续使用。played()方法会被游戏者在每轮玩完后调用，它更新score哈希然表然后将它传给scoreboard用于显示。最后一个方法是keypress()，负责处理键盘事件，决定是哪位玩家玩的，并且通知它：
varmediator={
players:{},
setup:function(){
varplayers=this.players;
players.home=newPlayer('Home');
players.guest=newPlayer('Guest');
},
played:function(){
varplayers=this.players,
score={
Home:players.home.points,
Guest:players.guest.points
};
scoreboard.update(score);
},
keypress:function(e){
e=e||window.event;//IE
if(e.which===49){//key"1"
mediator.players.home.play();
return;
}
if(e.which===48){//key"0"
mediator.players.guest.play();
return;
}
}
};
最后一件事是初始化和结束游戏：
//go!
mediator.setup();
window.onkeypress=mediator.keypress;
//gameoverin30seconds
setTimeout(function(){
window.onkeypress=null;
alert('Gameover!');
},30000);
例子2：卖手机
vargoods={//库存
'red|32G':3,
'red|16G':5,
'blue|32G':3,
'blue|16G':6
}
//中介者
varmediator=(function(){
functionid(id){
returndocument.getElementById(id);
}
varcolorSelect=id('colorSelect'),
memorySelect=id('memorySelect'),
numberInput=id('numberInput'),
colorInfo=id('colorInfo'),
memoryInfo=id('memoryInfo'),
numberInfo=id('numberInfo'),
nextBtn=id('nextBtn');
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){
memoryInfo.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.isInteger(number-0)&&number>0){
nextBtn.disabled=true;
nextBtn.innerHTML='请输入正确的购买数量';
return;
}
nextBtn.disabled=false;
nextBtn.innerHTML='放入购物车';
}
}
})();
//添加事件
colorSelect.onchange=function(){
mediator.changed(this);
}
memorySelect.onchange=function(){
mediator.changed(this);
}
numberInput.onchange=function(){
mediator.changed(this);
}
参考文献：《JavaScript模式》《JavaScript设计模式与开发实践》
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。