JavaScript 디자인 패턴의 중재자 패턴 배우기_javascript 기술

1. 정의

객체 지향 디자인은 다양한 객체에 대한 동작 분포를 장려하고 객체를 더 작은 단위로 나누어 객체의 재사용성을 높이는 데 도움이 됩니다. 그러나 이러한 세분화된 개체 간의 연결이 급증하면 재사용성이 줄어들 수 있습니다.
매개자 패턴의 역할은 객체 간의 긴밀한 결합을 끊는 것입니다.

2. 예: 상품 구매

• 휴대폰 구매 페이지를 개발한다고 가정해 보겠습니다. 구매 과정에서 휴대폰의 색상을 선택하고 구매 수량을 입력하면 그에 따라 입력된 내용이 표시될 수 있습니다. 페이지. 다음 단계를 동적으로 표시하는 버튼도 있습니다(이 색상의 재고가 충분하면 다음 단계가 표시되고 그렇지 않으면 재고가 부족합니다).
  

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

};

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

휴대폰 메모리를 나타내는 또 다른 드롭다운 목록 상자를 페이지에 추가하면 위 코드가 크게 변경됩니다.

3. 중개 모델을 소개합니다

모든 노드 개체는 중재자와만 통신합니다.
드롭다운 선택 상자 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);
}

중개 모델은 데메테르의 법칙을 충족하는 구현입니다. 데미트의 법칙은 최소 지식의 원리라고도 하는데, 이는 객체가 다른 객체에 대해 가능한 한 적게 알아야 한다는 의미입니다. "성문에 화재가 발생하여 연못에 재난이 발생하는" 것을 방지하기 위해.

단점: 가장 큰 단점은 중간 객체가 시스템에 추가된다는 점이다. 객체 간 상호작용의 복잡성이 중간 객체의 복잡성으로 전가되기 때문이다. 중간 개체를 만드는 것은 종종 거대하고 유지 관리가 어렵습니다.

일반적으로 객체 간의 복잡한 결합으로 인해 호출 및 유지 관리가 어려워지고 프로젝트가 변경됨에 따라 이러한 결합 수준이 기하급수적으로 증가하는 경우 중재자 패턴을 사용하여 코드를 리팩터링하는 것을 고려할 수 있습니다.

이 기사가 자바스크립트 프로그래밍을 배우는 모든 사람에게 도움이 되기를 바랍니다.