1.定义：用一个中介对象来封装一系列的对象交互。中介者使各对象不需要显示的相互引用，从而使其耦合松散，而且可以独立地改变它们之间的交互。
2.主要目的：
中转作用，通过中介者和其他对象进行通信；协调作用，中介者可以进一步的对对象之间的关系进行封装
中介者对象不能订阅消息，只有活跃对象才可订阅中介者的消息，中介者是消息的发送者
3.举例：购物车需求，比如购买手机时，购物车页面存在手机内存、颜色、购买数量等表单项，都会触发change事件，那么可以通过中介者来转发处理这些事件，实现各个事件间的解耦，仅仅维护中介者对象即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>中介者模式demo</title>
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
</head>
<body>
<div>
<div>
<span>请选择颜色</span>
<select id="selColor">
<option value="roseGold">玫瑰金</option>
<option value="luxuryGold">土豪金</option>
</select>
</div>
<div>
<span>请选择内存：</span>
<select id="selMemory">
<option value="32G">32G</option>
<option value="64G">64G</option>
</select>
</div>
<div>
<span>请输入购买数量：</span>
<input type="text" id="selNum" />
</div>
<!-- <p style="color:red" id="tip"></p> -->
<div style="padding-top:30px">
<div>您选择的颜色为：</div><strong id="conColor"></strong>
<div>您选择的内存为：</div><strong id="conMemory"></strong>
<div>您选择的数量为：</div><strong id="conNum"></strong>
</div>
<button id="nextBtn">加入购物车</button>
</div>
</body>
<script>
// 库存量
var goods = {
"roseGold|32G": 10,
"roseGold|64G": 5,
"luxuryGold|32G": 8,
"luxuryGold|64G": 6
};
var colorSelect = document.getElementById("selColor"),
memorySelect = document.getElementById("selMemory"),
numberInput = document.getElementById("selNum"),
colorInfo = document.getElementById("conColor"),
memeryInfo = document.getElementById("conMemory"),
numberInfo = document.getElementById("conNum"),
nextBtn = document.getElementById("nextBtn");
var mediator = (function() {
return {
changed: function(obj) {
var color = colorSelect.value, // 颜色
memory = memorySelect.value,// 内存
number = +numberInput.value, // 数量
stock = goods[color + '|' + memory];// 对应颜色的库存量
console.log("颜色:",color,"内存:",memory,"购买数量:",number,"库存:",stock)
if(obj === colorSelect) {
colorInfo.innerHTML = color;
}else if(obj === memorySelect) {
memeryInfo.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 || (((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);
}
</script>
</html>4.优缺点：
优点：
中介者使各对象之间耦合松散，而且可以独立地改变它们之间的交互
中介者和对象一对多的关系取代了对象之间的网状多对多的关系
让每个对象了解最少的内容，这样做对于大型程序来说是非常有益的
缺点：
一个中介者如果管理的对象过多，可能会导致中介者本身难以维护，过度集中化，容易出现故障
5.应用场景
（1）数据驱动：数据充当中介者角色，通过数据让各ui之间协同工作。
（2）当一个系统对象很多，且之间关联关系很复杂，交叉引用容易产生混乱时适合用中介者模式重构
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。