Erlernen Sie das Mediator-Muster von JavaScript-Designmustern_Javascript-Fähigkeiten

1. Definition

Objektorientiertes Design fördert die Verteilung von Verhaltensweisen auf verschiedene Objekte und unterteilt Objekte in kleinere Granularitäten, was zur Verbesserung der Wiederverwendbarkeit von Objekten beiträgt. Allerdings kann die Zunahme der Verbindungen zwischen diesen feinkörnigen Objekten wiederum ihre Wiederverwendbarkeit verringern.
Die Rolle des Vermittlermusters besteht darin, die enge Kopplung zwischen Objekten zu durchbrechen.

2. Beispiel: Waren kaufen

• Angenommen, wir entwickeln eine Seite zum Kauf eines Mobiltelefons. Während des Kaufvorgangs können Sie die Farbe des Mobiltelefons auswählen und die Kaufmenge eingeben, und der eingegebene Inhalt kann entsprechend angezeigt werden die Seite. Außerdem gibt es eine Schaltfläche, die den nächsten Schritt dynamisch anzeigt (wenn der Vorrat dieser Farbe ausreicht, wird der nächste Schritt angezeigt, andernfalls reicht der Vorrat nicht aus).
  

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

};

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

Wenn der Seite ein weiteres Dropdown-Listenfeld hinzugefügt wird, das den Speicher des Mobiltelefons darstellt, ändert sich der obige Code erheblich.

3. Einführung des Vermittlermodells

Alle Knotenobjekte kommunizieren nur mit dem Mediator.
Wenn ein Ereignis in den Dropdown-Auswahlfeldern selColor, selMemory oder Textfeld selNum auftritt, wird der Mediator lediglich darüber informiert, dass diese geändert wurden, und gleichzeitig wird es als Parameter an den Mediator übergeben, sodass der Mediator kann identifizieren, wer sich geändert hat, und der Rest wird dem Vermittlerobjekt überlassen.

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

Das Zwischenmodell ist eine Implementierung, die dem Demeter-Gesetz entspricht. Demits Gesetz wird auch als Prinzip des geringsten Wissens bezeichnet, was bedeutet, dass ein Objekt so wenig wie möglich über andere Objekte wissen sollte. Um zu verhindern, dass „das Stadttor brennt und den Fischteich verwüstet“.

Nachteile: Der größte Nachteil besteht darin, dass dem System ein Zwischenobjekt hinzugefügt wird, da die Komplexität der Interaktion zwischen Objekten auf die Komplexität des Zwischenobjekts übertragen wird. Herstellung der Zwischenobjekte sind oft riesig und schwer zu warten.

Wenn die komplexe Kopplung zwischen Objekten im Allgemeinen Schwierigkeiten beim Aufrufen und Verwalten verursacht und diese Kopplungsgrade exponentiell zunehmen, wenn sich das Projekt ändert, können wir die Verwendung des Mediatormusters zur Umgestaltung des Codes in Betracht ziehen.

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die JavaScript-Programmierung lernen.