设计模式——中介者模式
在现实生活中，万物之间都有着复杂的联系。程序设计中也是一样。当整个应用架构慢慢变大时，不可避免的会创建各种各样的对象。而各个对象之间往往存在一定联系，当改动一个对象是可能无意间就影响了其他对象的功能。如果意识到部分对象之间有复杂的关系，就可以考虑使用中介者模式来管理。
中介者模式原理
中介者模式就是为了解除对象之间的耦合关系。相关对象的通信都通过中介者对象来管理。中介者对象一般会提供一份统一接口给一套相关对象，这些对象之间不用直接沟通就可以达到通信的目的。比如说常用的留学机构代办，留学生只需要提供相关资料给留学机构的相关"接口"，它就会根据资料的各种信息为你办理符合要求的留学申请呈递给相关大学。相关大学返回结果给留学机构进一步再返回给学生。这就是一种常见的中介者模式。
中介者模式和观察者模式有些相似，接受者和请求者都不进行直接的通信，但两者也有不少区别。观察者模式没有封装一个进行管理的单独对象，而是同时维护观察者对象和请求者对象来处理消息。而中介者模式则通过一个单独的中介者对象来处理消息带来的业务变更。
实例演示
假设现在要开发一个手机购买页面，可选信息有颜色，内存，购买数量并进行展示。并根据库存和可选信息的填写来展示下一步按钮的信息。
先构造HTML页面如下:
<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="true">
请选择手机颜色和购买数量
</button>
</body>
假设我们接收到货物的数据结构如下:
const goods = {
'red|32G': 3,
'red|16G': 0,
'blue|32G': 1,
'blue|16G': 6
};
中介者对象定义如下，通过change方法来接收请求者的变化 。
const mediator = (function() {
const colorSelect = document.getElementById('colorSelect');
const memorySelect = document.getElementById('memorySelect');
const numberInput = document.getElementById('numberInput');
const colorInfo = document.getElementById('colorInfo');
const memoryInfo = document.getElementById('memoryInfo');
const numberInfo = document.getElementById('numberInfo');
const nextBtn = document.getElementById('nextBtn');
return {
change(obj) {
let color = colorSelect.value;
let memory = memorySelect.value;
let number = numberInput.value;
let stock = goos[color + '|' + memory];
// 判断操作
if (obj === colorSelect) {
colorInfo,innerHTML = color;
} else if (obj === memorySelect) {
memoryInfo.innerHTML = number;
} else if (obj === numberInput) {
numberInfo.innerHTML = number;
}
if (!color) {
nextBtn.disabled = true;
nextBtn.innerHTML = '请选择手机颜色';
return;
}
if (!memory) {
nextBtn.disabled = true;
next.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.change(this);
};
memorySelect.onchange = function() {
mediator.change(this);
};
numberInput.oninput = function() {
mediator.change(this);
};
可以看到表单值和按钮内容实现了解耦，即使以后要新增相关需求，只需要改动中介者对象即可。
小结
在中介者模式中相关对象之间不知道彼此的存在，因此各个对象只需要关注自身的功能实现，对象之间的交互关系全交给中介者对象来维护。不过中介者模式会新增一个中介者对象在业务复杂时也是比较难维护的，还有进一步优化的余地。所以当对象之间的交互比较简单时也不用去过度设计。一般来说当自身感受到对象之间的复杂耦合确实影响到了代码的拓展性以及可维护性的时候，就可以考虑使用中介者模式重构代码了。
-- EOF --