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

奋飛

修改于 2020-10-21 09:54:26

4680

修改于 2020-10-21 09:54:26

文章被收录于专栏：Super 前端Super 前端

一、定义

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

二、示例：购买商品

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

<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);
}

中介者模式是迎合迪米特法则的一种实现。迪米特法则也叫最少知识原则，是指一个对象应该尽可能少地了解另外的对象。避免“城门失火，殃及鱼池”。

缺点：最大的缺点是系统中会增加一个中介对象，因为对象之间交互的复杂性，转移成了中介对象的复杂性，使得中介者对象经常是巨大的，很难维护。

一般来说，如果对象之间的复杂耦合确实导致调用和维护出现了困难，而且这些耦合度随项目的变化呈指数增长，那么我们可以考虑用中介者模式来重构代码。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2015年12月20日，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

javascript

登录后参与评论

0 条评论

热度