Fork me on GitHub

js设计模式-中介者模式

Posted on | In | Views:

中介者模式

定义：中介者模式的作用就是解除对象与对象之间的紧耦合关系。增加一个中介者对象后，
所有的相关对象都通过中介者对象来通信，而不是互相引用，所以当一个对象发生改变时，
只需要通知中介者对象即可。中介者使各对象之间耦合松散，而且可以独立地改变它们之间的交互。
中介者模式使网状的多对多关系变成了相对简单的一对多关系。
举例：
手机购买页面（颜色、数量、内存、价格）
MVC模式（控制层便是位于表现层与模型层之间的中介者。）

MVC 模式

我们应该很熟悉 MVC 三层模型实体模型（Model）、视图表现层（View）还有控制层（Control/Mediator）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/** 模擬 Model, View, Controller */
var M = {}, V = {}, C = {};
/** Model 負責存放資料 */
M.data = "hello world";
/** View 負責將資料輸出到螢幕上 */
V.render = (M) => { alert(M.data); }
/** Controller 作為一個 M 和 V 的橋樑 */
C.handleOnload = () => { V.render(M); }
/** 在網頁讀取的時候呼叫 Controller */
window.onload = C.handleOnload;

MVC 模式中的Control/Mediator 层，就是本设计模式的中介者 (它必须拿到 View 和 Model 的引用)。

手机购买页面

HTML 部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>
	选择颜色: 
	<select id="colorSelect">
		<option value="">请选择</option>
		<option value="red">红色</option>
		<option value="blue">蓝色</option>
	</select>
	选择内存: 
	<select id="memorySelect">
		<option value="">请选择</option>
		<option value="32G">32G</option>
		<option value="16G">16G</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>
<body>

JS部分

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
// 各种手机库存（通常来自于后端，这里前端进行模拟）
var goods = { 
	"red|32G": 3,
	"red|16G": 0,
	"blue|32G": 1,
	"blue|16G": 6
};
// 中介者
var mediator = (function(){
	// 获得所有节点的引用，以便对其进行操作（中介者必许获得对其他对象的引用）
	var colorSelect = document.getElementById( 'colorSelect' ),
		memorySelect = document.getElementById( 'memorySelect' ),
		numberInput = document.getElementById( 'numberInput' ),
		colorInfo = document.getElementById( 'colorInfo' ),
		memoryInfo = document.getElementById( 'memoryInfo' ),
		numberInfo = document.getElementById( 'numberInfo' ),
		nextBtn = document.getElementById( 'nextBtn' );
	return {
		changed( obj ){
			var color = colorSelect.value, // 颜色
				memory = memorySelect.value,// 内存
				number = numberInput.value, // 数量
				stock = goods[ color + '|' + memory ]; // 颜色和内存对应的手机库存数量
			if ( obj === colorSelect ){ // 如果改变的是选择颜色下拉框
				colorInfo.innerHTML = color;
			}else if ( obj === memorySelect ){
				memoryInfo.innerHTML = memory;
			}else if ( obj === numberInput ){
				numberInfo.innerHTML = number;
			}
			if ( !color ){
				nextBtn.disabled = true;
				nextBtn.innerHTML = '请选择手机颜色';
				return;
			}
			if ( !memory ){
				nextBtn.disabled = true;
				nextBtn.innerHTML = '请选择内存大小';
				return;
			}
			if ( ( ( number - 0 ) | 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.oninput = function(){
	mediator.changed( this );
};

PS：代码来源于–腾讯.曾探《JavaScript设计模式与开发实践》，但能很好的说明中介者模式在js实际项目中的应用。
PS：这里共有手机颜色、手机内存、手机数量的选择和展示共6个对象，和一个中介者对象。
中介者必须获得这6个对象的应用，当每个对象发生变化时都需要通知中介者，中介者再来执行具体操作。

参考文档：
js之中介模式
wiki-MVC

-------------本文结束感谢您的阅读，如果本文对你有帮助就记得给个star-------------
Donate comment here
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多