Learn the Mediator Pattern of JavaScript Design Patterns_javascript skills

1. Definition

Object-oriented design encourages the distribution of behaviors to various objects and divides objects into smaller granularities, which helps enhance the reusability of objects. However, due to the proliferation of connections between these fine-grained objects, their reusability may in turn be reduced.
The role of the mediator pattern is to break the tight coupling between objects.

2. Example: Purchase goods

• Suppose we are developing a page for purchasing a mobile phone. During the purchase process, you can select the color of the mobile phone and enter the purchase quantity, and the input content can be displayed accordingly on the page. There is also a button that dynamically displays the next step (if the stock of this color is sufficient, the next step is displayed; otherwise, the stock is insufficient).
  

<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 = "加入购物车";

};

/* 购买数量做同样处理 */

When another drop-down list box is added to the page, representing the mobile phone memory, the above code changes greatly.

3. Introducing the intermediary model

All node objects only communicate with the mediator.
When an event occurs in the drop-down selection box selColor, selMemory or text box selNum, it only notifies the mediator that they have been changed, and passes itself as a parameter to the mediator so that the mediator can identify who has changed, and the rest Things are left to the mediator object to complete.

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

The intermediary model is an implementation that caters to Demeter's Law. Demit's law is also called the principle of least knowledge, which means that an object should know as little as possible about other objects. To avoid "fire at the city gate, causing disaster to the fish pond".

Disadvantages: The biggest disadvantage is that an intermediary object will be added to the system, because the complexity of the interaction between objects is transferred to the complexity of the intermediary object, making the intermediary Objects are often huge and difficult to maintain.

Generally speaking, if the complex coupling between objects does cause difficulties in calling and maintaining, and these coupling degrees increase exponentially as the project changes, then we can consider using the mediator pattern to refactor the code.

I hope this article will be helpful to everyone learning JavaScript programming.