[Pattern] 中介者模式

中介者模式

核心在于接触多个对象之间错综复杂的关系，使得每个对象只需要和中介者进行通信，而对象与其他对象之间的联系则交由中介者传达。

场景:

某购物网站的商品详情页中的添加到购物车模块，需要包含有如下的逻辑: 1）选择商品规格，然后填写购买数量 2）如果购买数量大于可售数量，则加入购物车按钮置灰 3）如果没有填写购买数量，则按钮提示请填写数量

实现：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>中介者模式</title>
  </head>
  <body>
    选择颜色：
    <select name="" id="colorSelect">
      <option value="red">红色</option>
      <option value="blue">蓝色</option>
    </select>
    输入数量：
    <input type="text" name="" id="numberInput" />
    当前选择了：
    <span id="colorInfo"></span>
    <span id="numberInfo"></span>
    <button id="nextBtn" disabled="true">请选择手机颜色和购买数量</button>
  </body>
  <script>
    var $ = document.querySelector.bind(document)
    const colorSelect = $('#colorSelect'),
      numberInput = $('#numberInput'),
      colorInfo = $('#colorInfo'),
      numberInfo = $('#numberInfo '),
      nextBtn = $('#nextBtn')

    const good = {
      red: 3,
      blue: 6
    }
    // meidator = {
    //   changed: function (this){}
    // }
    const mediator = (function() {
      // 有一个参数, 当前改变的元素
      const changed = function(obj) {
        let color = colorSelect.value
        let number = numberInput.value
        let stock = good[color]
        if (obj === colorSelect) {
          // 变动的DOM元素
          colorInfo.innerHTML = color
        } else if (obj === numberInput) {
          numberInfo.innerHTML = number
        }

        if (!color) {
          nextBtn.disabled = true
          nextBtn.innerHTML = '请选择手机颜色'
          return // return停止后续的判断
        }
        // console.log((number - 0) | 0, number - 0)
        if (((number - 0) | 0) !== number - 0) {
          nextBtn.disabled = true
          nextBtn.innerHTML = '请输入正确的购买数量'
          return
        }
        // console.log(number, stock)
        if (number > stock) {
          nextBtn.disabled = true
          nextBtn.innerHTML = '库存不足'
          return
        }
        nextBtn.disabled = false
        nextBtn.innerHTML = '加入购物车'
      }
      return {
        // 返回函数字面量
        changed
      }
    })()

    // 添加onchange监听事件
    colorSelect.onchange = function() {
      mediator.changed(this) // onchange里调用中介者函数
    }
    numberInput.onchange = function() {
      mediator.changed(this)
    }
  </script>
</html>

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

david2tdw / blog

[Pattern] 中介者模式 #146

中介者模式

场景: