设计模式-中介者模式

1、中介者模式 1.1、概念

通过一个中介者对象，其他所有的相关对象都通过该中介者对象来通信，而不是相互引用，当其中的一个对象发生改变时，只需要通知中介者对象即可。通过中介者模式可以解除对象与对象之间的紧耦合关系。

1.2、例如

现实生活中，航线上的飞机只需要和机场的塔台通信就能确定航线和飞行状态，而不需要和所有飞机通信。同时塔台作为中介者，知道每架飞机的飞行状态，所以可以安排所有飞机的起降和航线安排。

1.3、适用的场景

例如购物车需求，存在商品选择表单、颜色选择表单、购买数量表单等，都会触发change事件，那么可以通过中介者来转发处理这些事件，实现各个事件间的解耦，仅仅维护中介者对象即可。

1.4、html

<div> <div> <span>选择颜色:  "red|32G": 3, "red|16G": 0, "blue|32G": 1, "blue|16G": 6 }; // 中介者对象 let mediator = (function () { let 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'), regNumber = /^[1-9]{1}[0-9]{0,2}$/; return { changed: function (obj) { // 颜色 let 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) return (nextBtn.disabled = true, nextBtn.innerHTML = '请选择手机颜色'); if (!memory) return (nextBtn.disabled = true, nextBtn.innerHTML = '请选择内存大小'); if (!regNumber.test(number)) return (nextBtn.disabled = true, nextBtn.innerHTML = '请输入正确的购买数量'); if (number > stock) return (nextBtn.disabled = true, nextBtn.innerHTML = '库存不足'); nextBtn.disabled = false; nextBtn.innerHTML = '放入购物车'; } } })(); // 事件函数 // id选择器可以直接绑定事件，不需要特意获取。 colorSelect.onchange = function () { mediator.changed(this); }; memorySelect.onchange = function () { mediator.changed(this); }; numberInput.oninput = function () { mediator.changed(this); }; 

1.6、相关链接

1、掘金-原文

2、普通写法 2.1、html

<div> <span>选择颜色: "red": 3, "blue": 6 }; colorSelect.onchange = function () { // 获取选中的颜色值 var color = this.value, // 数量 number = numberInput.value, // 该颜色手机对应的当前库存 stock = goods[color]; console.log(color, number); // 赋值 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]; numberInfo.innerHTML = number; 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 = '放入购物车'; };