学习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);
	}