一、定义
面向对象设计鼓励将行为分布到各个对象中，把对象划分成更小的粒度，有助于增强对象的可复用性。但由于这些细粒度对象之间的联系激增，又可能反过来降低它们的可复用性。
中介者模式的作用就是解除对象与对象之间的紧耦合关系。
二、示例：购买商品
- 假设我们正在开发一个购买手机的页面，购买流程中，可以选择手机颜色以及输入购买数量，同时页面中可以对应展示输入内容。还有一个按钮动态显示下一步操作（该颜色库存量充足，显示下一步；否则显示库存不足）。
<div>
<span>请选择颜色</span>
<select id="selColor">
<option value="roseGold">玫瑰金</option>
<option value="luxuryGold">土豪金</option>
</select>
</div>
<div>
<span>请输入购买数量：</span>
<input type="text" id="selNum" />
</div>
<div>
<span>您选择的颜色为：</span><strong id="conColor"></strong>
<span>您选择的数量为：</span><strong id="conNum"></strong>
</div>
<button id="nextBtn">加入购物车</button>
// 库存量
var goods = {
roseGold: 10,
luxuryGold: 10
};
var colorSelect = document.getElementById("selColor"),
numberInput = document.getElementById("selNum"),
colorInfo = document.getElementById("conColor"),
numberInfo = document.getElementById("conNum"),
nextBtn = document.getElementById("nextBtn");
colorSelect.onchange = function() {
var color = colorSelect.value, // 颜色
number = +numberInput.value, // 数量
stock = goods[color]; // 对应颜色的库存量
colorInfo.innerHTML = color;
if(!color) {
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 = "加入购物车";
};
/* 购买数量做同样处理 */
当页面中新增加另外一个下拉列表框，代表手机内存，上述代码改动面很大。
三、引入中介模式
所有的节点对象只跟中介者通信。
当下拉选择框selColor、selMemory亦或文本框selNum发生了事件行为时，仅通知中介者它们被改变了，同时把自己当做参数传入中介者，以便中介者辨别是谁发生了改变，剩下的事情交给中介者对象来完成。
<div>
<span>请选择颜色：</span>
<select id="selColor">
<option value="roseGold">玫瑰金</option>
<option value="luxuryGold">土豪金</option>
</select>
</div>
<div>
<span>请选择内存：</span>
<select id="selMemory">
<option value="16G">16G</option>
<option value="64G">64G</option>
</select>
</div>
<div>
<span>请输入购买数量：</span>
<input type="text" id="selNum" />
</div>
<div>
<span>您选择的颜色为：</span><strong id="conColor"></strong>
<span>您选择的内存为：</span><strong id="conMemory"></strong>
<span>您选择的数量为：</span><strong id="conNum"></strong>
</div>
<button id="nextBtn">加入购物车</button>
// 库存量
var goods = {
"roseGold|16G": 10,
"roseGold|32G": 10,
"luxuryGold|16G": 10,
"luxuryGold|32G": 10
};
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]; // 对应颜色的库存量
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);
}
中介者模式是迎合迪米特法则的一种实现。迪米特法则也叫最少知识原则，是指一个对象应该尽可能少地了解另外的对象。避免“城门失火，殃及鱼池”。
缺点：最大的缺点是系统中会增加一个中介对象，因为对象之间交互的复杂性，转移成了中介对象的复杂性，使得中介者对象经常是巨大的，很难维护。
一般来说，如果对象之间的复杂耦合确实导致调用和维护出现了困难，而且这些耦合度随项目的变化呈指数增长，那么我们可以考虑用中介者模式来重构代码。
希望本文所述对大家学习javascript程序设计有所帮助。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。