May 30, 2021 Article blog
Intermediary objects practice the principle of least knowledge, that is, one object knows as little as possible about other objects, thereby minimizing the degree of coupling between objects. In this way, each object only needs to pay attention to its own implementation logic, the interaction between objects to the intermediary object to implement and maintain.
Mobile phone purchase page, in the purchase process, you can choose the color of the phone and enter the purchase quantity, while the page has two display areas, respectively, to show the user just selected the color and quantity. There is also a button that dynamically shows the next step, we need to query the color phone corresponding inventory, if the inventory quantity is less than the quantity purchased, the button will be disabled and show insufficient inventory, the opposite button can be clicked and displayed put into the shopping cart.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>中介者模式 购买商品</title>
</head>
<body>
选择颜色：
<select id="colorSelect">
<option value="">请选择</option>
<option value="red">红色</option>
<option value="blue">蓝色</option>
</select>
输入购买数量：
<input type="text" id="numberInput">
您选择了颜色：<div id="colorInfo"></div><br>
您输入了数量：<div id="numberInfo"></div><br>
<button id="nextBtn" disabled>请选择手机颜色和购买数量</button>
</body>
<script>
// 最初级的写法
var colorSelect = document.getElementById('colorSelect'),
numberInput = document.getElementById('numberInput'),
colorInfo = document.getElementById('colorInfo'),
numberInfo = document.getElementById('numberInfo'),
nextBtn = document.getElementById('nextBtn');
var goods = {
'red': 3,
'blue': 6
}
colorSelect.onchange = function(){
var color = this.value,
number = numberInput.value,
stock = goods[color]
colorInfo.innerHTML = color;
if(!color){
nextBtn.disabled = true;
nextBtn.innerHTML = '请选择手机颜色';
return;
}
if( ( (number-0) | 0 ) !== number-0 ){ //用户输入的购买数量是否为正整数
nextBtn.disabled = true;
nextBtn.innerHTML = '请输入正确的购买数量';
return;
}
if(number > stock){ //当前选择数量大于库存量
nextBtn.disabled = true;
nextBtn.innerHTML = '库存不足';
return;
}
nextBtn.disabled = false;
nextBtn.innerHTML = '放入购物车';
}
numberInput.oninput = function(){
var color = colorSelect.value,
number = this.value,
stock = goods[color]
colorInfo.innerHTML = color;
if(!color){
nextBtn.disabled = true;
nextBtn.innerHTML = '请选择手机颜色';
return;
}
if( ( (number-0) | 0 ) !== number-0 ){ //用户输入的购买数量是否为正整数
nextBtn.disabled = true;
nextBtn.innerHTML = '请输入正确的购买数量';
return;
}
if(number > stock){ //当前选择数量大于库存量
nextBtn.disabled = true;
nextBtn.innerHTML = '库存不足';
return;
}
nextBtn.disabled = false;
nextBtn.innerHTML = '放入购物车';
}
</script>
</html>
In the previous example, the connection between objects was highly coupled, just two input boxes were fine, but if there were multiple, the interlinking was very complex, so consider using the mediation pattern.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>中介者模式 购买商品</title>
</head>
<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">
您选择了颜色：<div id="colorInfo"></div><br>
您选择了内存：<div id="memoryInfo"></div><br>
您输入了数量：<div id="numberInfo"></div><br>
<button id="nextBtn" disabled>请选择手机颜色、内存和购买数量</button>
</body>
<script>
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: function(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){
nextBtn.disabled = true;
nextBtn.innerHTML = '请填写手机数量';
return;
}
if( ( (number-0) | 0 ) !== number-0 ){ //用户输入的购买数量是否为正整数
nextBtn.disabled = true;
nextBtn.innerHTML = '请输入正确的购买数量';
return;
}
if(number > stock){ //当前选择数量大于库存量
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)
}
//以后如果想要再增加选项，如手机CPU之类的，只需在中介者对象里加上相应配置即可。
</script>
</html>
In the actual development, or pay attention to choose the pros and cons, intermediary objects because of the complexity of inter-object interaction, so maintenance costs may also be higher. I
n real-world development, the optimal goal is to complete project delivery quickly, rather than over-designing and stacking patterns. S
ometimes coupling between objects is also necessary, and the intermediary pattern is considered only if the complex coupling between objects has indeed made calls and maintenance unsustainable.