JavaScript Mediator Pattern Definition and Detailed Explanation of How to Reference Code

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, the proliferation of connections between these fine-grained objects may in turn reduce their reusability.

The role of the mediator pattern is to relieve the tight coupling between objects.

Example:

Suppose we are developing a page to purchase a mobile phone. During the purchase process, you can select the color of the mobile phone and enter the purchase quantity, and the page can display the input accordingly. content. 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).

<p>
  <span>请选择颜色</span> 
  <select id="selColor">
    <option value="roseGold">玫瑰金</option>
    <option value="luxuryGold">土豪金</option>
  </select>
</p>
<p>
  <span>请输入购买数量：</span>
  <input type="text" id="selNum" /> 
</p>
<p>
  <span>您选择的颜色为：</span><strong id="conColor"></strong>
  <span>您选择的数量为：</span><strong id="conNum"></strong>
</p>

<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. .

Introducing the intermediary mode

All node objects only communicate with the intermediary.
When an event occurs in the drop-down selection box selColor, selMemory or text box selNum, the mediator will only be notified that they have been changed, and at the same time, pass itself as a parameter to the mediator, so that the mediator can identify who has changed. The mediator object does the rest.

<p>
  <span>请选择颜色：</span> 
  <select id="selColor">
    <option value="roseGold">玫瑰金</option>
    <option value="luxuryGold">土豪金</option>
  </select>
</p>
<p>
  <span>请选择内存：</span>
  <select id="selMemory">
    <option value="16G">16G</option>
    <option value="64G">64G</option>
  </select>
</p>
<p>
  <span>请输入购买数量：</span>
  <input type="text" id="selNum" /> 
</p>
<p>
  <span>您选择的颜色为：</span><strong id="conColor"></strong>
  <span>您选择的内存为：</span><strong id="conMemory"></strong>
  <span>您选择的数量为：</span><strong id="conNum"></strong>
</p>

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

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

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

The above is the detailed content of JavaScript Mediator Pattern Definition and Detailed Explanation of How to Reference Code. For more information, please follow other related articles on the PHP Chinese website!