设计模式——中介者模式

「这是我参与2022首次更文挑战的第20天，活动详情查看：2022首次更文挑战」

概述

提供了一个中介类来封装一系列的对象及其交互，中介者使各对象不需要显示地相互作用。这个中介类，通常处理不同类之间的通信，并支持松耦合，使代码易于维护。中介者模式属于行为型模式。

举例

1. 每个用户使用微信进行通信
2. 我们从火车站购买车票
3. 玩家在游戏中对战
4. ... ...

今天我们的例子是：

添加购物车功能

在购买手机时，需要使用用户选中的颜色和数量去和库存做对比，来确定是否可以添加进入购物车。

1. 选择颜色select，监听change事件
2. 填写数量input，监听input事件

 <h2>购买手机</h2>
<div>
    颜色：
    <select class="color">
        <option value="red">红色</option>
        <option value="green">绿色</option>
        <option value="yellow">黄色</option>
    </select>
    数量：
    <input class="num" type="number" />
</div>
<div class="result">
    <span class="msg">库存足够</span>
    <button class="btn">添加到购物车</button>
</div>
<script>
    const dColor = document.getElementsByClassName('color')[0];
    const dNum = document.getElementsByClassName('num')[0];
    const dMsg = document.getElementsByClassName('msg')[0];
    const dBtn = document.getElementsByClassName('btn')[0];
    const colorCount = {
        red: 4,
        green: 6,
        yellow: 8,
    }
    dColor.addEventListener('change', function(event) {
        const num = dNum.valuel;
        const val = event.target.value;
        if (num > colorCount[val]) {
            dMsg.innerHTML = '库存不足';
            dBtn.disabled = true;
        } else {
            dMsg.innerHTML = '';
            dBtn.disabled = false;
        }
    }, false)
    dNum.addEventListener('input', function(event) {
        const val = event.target.value;
        const color = dColor.value;
        if (val > colorCount[color]) {
            dMsg.innerHTML = '库存不足';
            dBtn.disabled = true;
        } else {
            dMsg.innerHTML = '';
            dBtn.disabled = false;
        }
    }, false)
</script>

引入中介者

如果我们能把所有的逻辑交给中介者处理。当条件触发时，我们去调用中介者。代码可以这样写

dColor.addEventListener('change', function(event) {
    mediator('color');
}, false)
dNum.addEventListener('input', function(event) {
    mediator('input');
}, false)

function mediator(type) {
    const color = dColor.value;
    const val = dNum.value;
    if (val > colorCount[color]) {
        dMsg.innerHTML = '库存不足';
        dBtn.disabled = true;
    } else {
        dMsg.innerHTML = '';
        dBtn.disabled = false;
    }
}

这样我们就可以把相关的逻辑进程整合，代码结构更好。