我们可以看到如上代码；玩家与玩家之间的耦合代码已经解除了，而把所有的逻辑操作放在中介者对象里面进去处理，某个玩家的任何操作不需要去遍历去通知其他玩家，而只是需要给中介者发送一个消息即可，中介者接受到该消息后进行处理，处理完消息之后会把处理结果反馈给其他的玩家对象。使用中介者模式解除了对象与对象之间的耦合代码; 使程序更加的灵活.
中介者模式实现购买商品的列子
下面的列子是书上的列子，比如在淘宝或者天猫的列子不是这样实现的，也没有关系，我们可以改动下即可，我们最主要来学习下使用中介者模式来实现的思路。
首先先介绍一下业务：在购买流程中，可以选择手机的颜色以及输入购买的数量，同时页面中有2个展示区域，分别显示用户刚刚选择好的颜色和数量。还有一个按钮动态显示下一步的操作，我们需要查询该颜色手机对应的库存，如果库存数量小于这次的购买数量，按钮则被禁用并且显示库存不足的文案，反之按钮高亮且可以点击并且显示假如购物车。
HTML代码如下：
选择颜色:
<select> <option value="">请选择</option> <option value="red">红色</option> <option value="blue">蓝色</option> </select> <p>输入购买的数量: <input type="text"/></p> 你选择了的颜色：<div></div> <p>你输入的数量: <div></div> </p> <button disabled="true">请选择手机颜色和购买数量</button>
首先页面上有一个select选择框，然后有输入的购买数量输入框，还有2个展示区域，分别是选择的颜色和输入的数量的显示的区域，还有下一步的按钮操作；
我们先定义一下：
假设我们提前从后台获取到所有颜色手机的库存量
var goods = { // 手机库存 "red": 6, "blue": 8 };
接着 我们下面分别来监听colorSelect的下拉框的onchange事件和numberInput输入框的oninput的事件，然后在这两个事件中作出相应的处理
常规的JS代码如下：
// 假设我们提前从后台获取到所有颜色手机的库存量 var goods = { // 手机库存 "red": 6, "blue": 8 }; /* 我们下面分别来监听colorSelect的下拉框的onchange事件和numberInput输入框的oninput的事件， 然后在这两个事件中作出相应的处理 */ var colorSelect = document.getElementById("colorSelect"), numberInput = document.getElementById("numberInput"), colorInfo = document.getElementById("colorInfo"), numberInfo = document.getElementById("numberInfo"), nextBtn = document.getElementById("nextBtn"); // 监听change事件 colorSelect.onchange = function(e){ select(); }; numberInput.oninput = function(){ select(); }; function select(){ var color = colorSelect.value, // 颜色 number = numberInput.value, // 数量 stock = goods[color]; // 该颜色手机对应的当前库存 colorInfo.innerHTML = color; numberInfo.innerHTML = number; // 如果用户没有选择颜色的话，禁用按钮 if(!color) { nextBtn.disabled = true; nextBtn.innerHTML = "请选择手机颜色"; return; } // 判断用户输入的购买数量是否是正整数 var reg = /^\d+$/g; if(!reg.test(number)) { nextBtn.disabled = true; nextBtn.innerHTML = "请输入正确的购买数量"; return; } // 如果当前选择的数量大于当前的库存的数量的话，显示库存不足 if(number > stock) { nextBtn.disabled = true; nextBtn.innerHTML = "库存不足"; return; } nextBtn.disabled = false; nextBtn.innerHTML = "放入购物车"; }
上面的代码虽然是完成了页面上的需求，但是我们的代码都耦合在一起了，目前虽然问题不是很多，假如随着以后需求的改变，SKU属性越来越多的话，比如页面增加一个或者多个下拉框的时候，代表选择手机内存，现在我们需要计算颜色，内存和购买数量，来判断nextBtn是显示库存不足还是放入购物车；代码如下：
HTML代码如下：
选择颜色: <select> <option value="">请选择</option> <option value="red">红色</option> <option value="blue">蓝色</option> </select> <br/> <br/> 选择内存： <select> <option value="">请选择</option> <option value="32G">32G</option> <option value="64G">64G</option> </select> <p>输入购买的数量: <input type="text"/></p> 你选择了的颜色：<div></div> 你选择了内存：<div></div> <p>你输入的数量: <div></div> </p> <button disabled="true">请选择手机颜色和购买数量</button>
JS代码变为如下：