笔记

再一次，javascript设计模式与开发实践-中介者模式

简述

解除对象与对象之间的紧耦合关系。

当飞机想要降落时，会通知指挥塔，指挥塔安排降落，而不必和其他飞机通信，来保证安全。
购买足球彩票，只需要把钱交给博彩公司，博彩公司负责收钱和发钱，而不必与其他人交换信息。

使用场景

  • 游戏
  • 购物订单
  • ..

案例

如果要写一个购物订单程序，使用中介者模式是个很好的方式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
	选择颜色：
	<select id="colorSelect">
		<option value="">请选择</option>
		<option value="蓝色">蓝色</option>
		<option value="红色">红色</option>
	</select>

	选择内存：
	<select id="memorySelect">
		<option value="">请选择</option>
		<option value="32G">64G</option>
		<option value="64G">32G</option>
	</select>
	<hr>	
	您选择了颜色：<div id="colorInfo"></div>
	您选择了内存：<div id="memoryInfo"></div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var mediator = (function() {
	var colorSelect = document.querySelector('#colorSelect'),
		memorySelect = document.querySelector('#memorySelect'),
		colorInfo = document.querySelector('#colorInfo'),
		memoryInfo = document.querySelector('#memoryInfo');

	return {
		changed: 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.changed(this);
};

memorySelect.onchange = function() {
	mediator.changed(this);
};