JavaScript 중재자 패턴 정의 및 코드 참조 방법에 대한 자세한 설명

객체 지향 디자인은 다양한 객체에 대한 동작 분포를 장려하고 객체를 더 작은 단위로 나누어 객체의 재사용성을 향상시킵니다. 그러나 이러한 세분화된 개체 간의 연결이 급증하면 재사용성이 줄어들 수 있습니다.

중재자 패턴의 역할은 객체 간의 긴밀한 결합 관계를 끊는 것입니다.

예:

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

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

};

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

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

중개자 모드 소개

모든 노드 개체는 중개자와만 통신합니다.
드롭다운 선택 상자 selColor, selMemory 또는 텍스트 상자 selNum에서 이벤트가 발생하면 중재자에게 변경되었음을 알리고 동시에 중재자에게 매개 변수로 전달되므로 중재자는 다음 작업을 수행할 수 있습니다. 누가 변경되었는지 식별하고 나머지는 중재자 개체에 맡겨 완료합니다.

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

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

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

위 내용은 JavaScript 중재자 패턴 정의 및 코드 참조 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!