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

1、中介者模式的作用就是解除对象与对象之间的紧耦合关系。增加一个中介者对象后，所有的相关对象都通过中介者来通信，而不是互相引用，所以当一个对象发生改变时，只需要通知中介对象即可。中介者使各对象之间耦合松散，而且可以独立的改变他们之间的交互。中介者模式使网状的多对多关系变成了相对简单的一对多关系。

<select id="colorselect">
<option value="">请选择颜色</option>
<option value="red">红色</option>
<option value="blue">蓝色</option>
</select>

<select name="" id="memoryselect">
<option value="">请选择大小</option>
<option value="16G">16G</option>
<option value="32G">32G</option>
</select>

请输入购买数量:
<input type="text" id="numberInput" /><br/>

您选择了颜色:
<div id="colorInfo"></div><br />
您选择了内存:
<div id="memoryInfo"></div><br />
您输入了数量:
<div id="numberInfo"></div><br />

<button id="nextBtn" disabled="true">请选择手机颜色和购买数量</button>

<script type="text/javascript">

var colorselect = document.getElementById("colorselect");
var memoryselect = document.getElementById("memoryselect");
var numberInput = document.getElementById("numberInput");
var colorInfo = document.getElementById("colorInfo");
var memoryInfo = document.getElementById("memoryInfo");
var numberInfo = document.getElementById("numberInfo");

var goods = {

"red|32G":3,
"red|16G":0,
"blue|32G":1,
"blue|16G":6
}

var mediator = (function(obj){

return {
change:function(obj){

var color = colorselect.value,
memory = memoryselect.value;

if(obj == colorselect){
colorInfo.innerHTML = color;
}else if(obj  == memoryselect){
memoryInfo.innerHTML = memory;
}

}
}
})();

colorselect.onchange = function(){
mediator.change(this);
}
memoryselect.onchange = function(){
mediator.change(this);
}
numberInput.oninput = function(){
mediator.change(this);
}