JavaScript设计模式 中介者模式

一.生活场景

在机场中,塔台起着着中介者作用,有了塔台,附近需要降落的飞机就不需要互相通信,取而代之的是附近需要降落的飞机将信息发送给塔台,塔台统筹调度飞机。

二.定义

中介者(Mediator)模式:定义一个中介对象来封装一系列对象之间的交互,使原有对象之间的耦合松散,且可以独立地改变它们之间的交互。中介者模式又叫调停模式,它是迪米特法则的典型应用。

中介者模式是一种对象行为型模式,其主要优点如下。

  • 类之间各司其职,符合迪米特法则。
  • 降低了对象之间的耦合性,使得对象易于独立地被复用。
  • 将对象间的一对多关联转变为一对一的关联,提高系统的灵活性,使得系统易于维护和扩展。

主要缺点是:中介者模式将原本多个对象直接的相互依赖变成了中介者和多个同事类的依赖关系。当同事类越多时,中介者就会越臃肿,变得复杂且难以维护。

三.开发实践

1.购买商品
需求:假设我们需要购买一台手机,可以选择购买颜色和数量,当用户未选择颜色,数量或者选择了库存不足时,我们在购买按钮上提示信息,并不可点击。
一般实现:

<body>
    选择颜色: <select id="colorSelect">
        <option value="">请选择option>
        <option value="red">红色option>
        <option value="blue">蓝色option>
    select>
    输入购买数量: <input type="text" id="numberInput" />
    您选择了颜色: <div id="colorInfo">div><br />
    您输入了数量: <div id="numberInfo">div><br />
    <button id="nextBtn" disabled="true">请选择手机颜色和购买数量button>
body>
<script>
    var colorSelect = document.getElementById('colorSelect'),
        numberInput = document.getElementById('numberInput'),
        colorInfo = document.getElementById('colorInfo'),
        numberInfo = document.getElementById('numberInfo'),
        nextBtn = document.getElementById('nextBtn');
    var goods = {
      // 手机库存
        "red": 3,
        "blue": 6
    };
    colorSelect.onchange = function () {
     
        var color = this.value, // 颜色
            number = numberInput.value, // 数量
            stock = goods[color]; // 该颜色手机对应的当前库存
        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 = '放入购物车';
    };
</script>

弊端:每次修改其中一个选项时,我们都需要在触发函数内判断一遍其它项是否符合条件,来控制购买按钮的显示内容,当我们再添加例如内存,存储空间,套餐等选项时,就增加很多让人肉疼的判断代码。
这时,我们可以引入中介者解决,将按钮的显示内容交给它判断。

var goods = {
      // 手机库存
    "red|32G": 3,
    "red|16G": 0,
    "blue|32G": 1,
    "blue|16G": 6
};
var mediator = (function () {
     
    var 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');
    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) {
     
                memoryInfo.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 - 0) | 0) !== number - 0) {
      // 输入购买数量是否为正整数
                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设计模式)