javascript设计模式学习之十四——中介者模式

一、中介者模式的定义和应用场景

中介者模式的作用在于解除对象之间的紧耦合关系，增加一个中介者之后，所有对象都通过中介者来通信，而不是互相引用，当一个对象发生变化的时候，仅需要通知中介者即可。从而将网状的多对多关系转换为了简单的一对多关系。

中介者模式使得各个对象之间得以解耦，以中介者和对象之间一对多的关系取代了多个对象之间多对多的关系，其缺点在于将对象之间的复杂性转移到了中介者对象的复杂性，系统增加的这个中介者对象往往是复杂和难以维护的，往往当对象之间的耦合度呈指数增长的时候，就需要考虑引入中介者模式。

二、中介者模式应用案例

假设正在编写一个手机购买页面，购买路程中，用户可以选择手机颜色及手机内存大小，同时页面有两个展示区域，分别显示用户选择好的颜色，内存大小，输入数量。还有一个按钮提示下一步的操作，如果操作不对则提示对应的提示信息，否则显示加入购物车。

页面的元素有多个，每一个元素的变化都会对按钮的行为产生影响，使用中介者模式实现代码如下：

 

var stocks={
    'red|16G':5,
    'red|32G':10,
    'blue|16G':7,
    'blue|32G':6
};
var colorSelect=document.getElementById('colorSelect');
var memorySelect=document.getElementById('memorySelect');
var numInput=document.getElementById('numInput');
var colorInfo=document.getElementById('colorInfo');
var memoryInfo=document.getElementById('memoryInfo');
var numInfo=document.getElementById('numInfo');
var btn=document.getElementById('btn');

var mediator=(function(){
    return {
        change:function(obj){
            var color=colorSelect.value;
            var memory=memorySelect.value;
            //console.log(numInput.value);
            var num=parseInt(numInput.value,10);
            //console.log(num);
            //ݫעʺהгքѾʭԫ֝ٸאީ֟ìʹփאީ֟ࠉӔʶҰע̍֟
            if(obj===colorSelect){
                colorInfo.innerHTML=color;
            }else if(obj==memorySelect){
                memoryInfo.innerHTML=memory;
            }else if(obj===numInput){
                numInfo.innerHTML=num;
            }
            
            if(!color){
                btn.disabled=true;
                btn.innerHTML='请选择颜色';
                return;
            }
            if(!memory){
                btn.disabled=true;
                btn.innerHTML='请选择内存大小';
                return;
            }
            var stock=stocks[color+'|'+memory];
        //    console.log(stock);
         
            if(num>stock){
                console.log('num>stock');
                btn.disabled=true;
                btn.innerHMTL='库存不足';
                return;
            }
            btn.disabled=false;
            btn.innerHTML='加入购物车';
        }
    };
    
})();
colorSelect.onchange=function(){
    mediator.change(this);
};
memorySelect.onchange=function(){
    mediator.change(this);
};
numInput.oninput=function(){
    mediator.change(this);
};