JavaScript中介模式

中介模式:

当对象和对象之间存在多对多的关系时,对象之间存在紧耦合关系,如果修改某一处对象,则可能会导致整个程序down了。而中介者模式是解耦对象之间的紧耦合关系,让对象和对象之间不再是直接联系,让是让对象和中介联系,通过中介获得相关的信息来处理。

生活中常见的场景是比如火车出发和到达站台,需要由指挥调度中心来发出信息,该列车是否可以出发了,或者该列车应该停靠哪个站台,而不用让该列车去联系其他列车A站台是否可停靠等信息。 让列车之间的相互联系仅通过调度中心就可以获得相关信息。这样维护起来也很简单。

举例如,经常在网上买东西,比如买电脑,电脑有颜色选择,数量选择等信息,同时每选择某个属性,都会去要拿其他的属性一起去查询是否还有足够的库存让用户可以购买,即是否可以点击购买button。如果没有足够的库存,或者某个属性没有选择,那么button将disabled,如果正常写代码的话,那么在比如颜色选择上:

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
var color = document.getElementById('color');
var number = document.getElementById('number');
var buyBtn = document.getElementById('buy');
var colorInput = document.getElementById('colorInput');
var info = document.getElementById('info');

var stock = {
red: 4,
black: 3
};

color.onchange = function() {
var color = this.value;
var num = number.value;
if(!color) {
info.innerHTML = 'need select color';
buyBtn.disabled = true;
return;
}
if(!num) {
info.innerHTML = 'need select num';
buyBtn.disabled = true;
return;
}
if(num > stock[color]) {
info.innerHTML = 'no stock';
buyBtn.disabled = true;
return;
}
buyBtn.disabled = false;
info.innerHTML = 'can buy';
}

那么对于在数量的选择上也会有相同的如上代码,那么如果以后再增加一个属性比如内存大小,那么在每个属性的onchange事件里面都需要增加相应的判断代码,维护起来想到麻烦。

采用中介者模式改进代码如下:

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
var color = document.getElementById('color');
var number = document.getElementById('number');
var buyBtn = document.getElementById('buy');
var info = document.getElementById('info');

var stock = {
red: 4,
black: 3
};

var middleAgent = function(obj) {
return function(obj) {
if(obj.currentTarget === color) {
console.log('color onchange');
} else if (obj.currentTarget === number) {
console.log('number onchange');
}
if(!color.value) {
info.innerHTML = 'need select color';
buyBtn.disabled = true;
return;
}
if(!number.value) {
info.innerHTML = 'need select number';
buyBtn.disabled = true;
return;
}
if(number.value > stock[color.value]) {
info.innerHTML = 'no stock';
buyBtn.disabled = true;
return;
}
buyBtn.disabled = false;
info.innerHTML = 'can buy';
}
};

color.onchange = middleAgent(this);
number.oninput = middleAgent(this);

如此这样,每个属性的变化都只需要和middleAgent中介者通信就可以,对象之间不需要知道彼此的存在,它们只需通过中介者对象来互相影响对方。

一般来说,我们再代码中对象之间有联系是正常的,但是如果对象之间的关系已经复杂到难以维护,则可以考虑使用中介者模式来改进。


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!