频道导航

学习JavaScript设计模式之中介者模式

2019-01-04 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了学习JavaScript设计模式之中介者模式，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

一、定义

面向对象设计鼓励将行为分布到各个对象中，把对象划分成更小的粒度，有助于增强对象的可复用性。但由于这些细粒度对象之间的联系激增，又可能反过来降低它们的可复用性。中介者模式的作用就是解除对象与对象之间的紧耦合关系。

二、示例：购买商品

假设我们正在开发一个购买手机的页面，购买流程中，可以选择手机颜色以及输入购买数量，同时页面中可以对应展示输入内容。还有一个按钮动态显示下一步操作（该颜色库存量充足，显示下一步；否则显示库存不足）。

请选择颜色

请输入购买数量：

您选择的颜色为：

您选择的数量为：

<button id="nextBtn">加入购物车

<div class="jb51code">
<pre class="brush:js;">
// 库存量
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发生了事件行为时，仅通知中介者它们被改变了，同时把自己当做参数传入中介者，以便中介者辨别是谁发生了改变，剩下的事情交给中介者对象来完成。

请选择颜色：

请选择内存：

请输入购买数量：

您选择的颜色为：

您选择的内存为：

您选择的数量为：

<button id="nextBtn">加入购物车

var colorSelect = document.getElementById("selColor"),memorySelect = document.getElementById("selMemory"),memeryInfo = document.getElementById("conMemory"),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程序设计有所帮助。

原文链接：https://www.f2er.com/js/50545.html

JavaScript 中介者模式设计模式设计模式