Definition des JavaScript-Mediator-Musters und detaillierte Erläuterung der Referenzierung von Code

Objektorientiertes Design fördert die Verteilung von Verhaltensweisen auf verschiedene Objekte und unterteilt Objekte in kleinere Granularitäten, was dazu beiträgt, die Wiederverwendbarkeit von Objekten zu verbessern. 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.

Beispiel:

Angenommen, wir entwickeln eine Seite zum Kauf eines Mobiltelefons. Während des Kaufvorgangs können Sie die Farbe des Mobiltelefons auswählen und den Kauf eingeben Menge, und die Eingabe kann entsprechend auf dem Seiteninhalt angezeigt werden. 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).

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

};

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

Wenn der Seite ein weiteres Dropdown-Listenfeld hinzugefügt wird, das das Mobiltelefon darstellt Speicher, der obige Code Die Änderungen sind enorm.

Einführung des Vermittlermodus

Alle Knotenobjekte kommunizieren nur mit dem Vermittler.
Wenn ein Ereignis in der Dropdown-Auswahlbox selColor, selMemory oder der Textbox selNum auftritt, wird der Mediator nur darüber benachrichtigt, dass sie geändert wurden, und übergibt sich gleichzeitig als Parameter an den Mediator dass der Mediator erkennen kann, wer sich geändert hat. Das Mediatorobjekt erledigt den 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);
}

Nachteile: Der größte Nachteil ist, dass einer hinzugefügt wird zum System Mediationsobjekte, da die Komplexität der Interaktion zwischen Objekten auf die Komplexität des Mediatorobjekts übertragen wird, wodurch das Mediatorobjekt oft riesig und schwer zu warten ist.

Wenn die komplexe Kopplung zwischen Objekten wirklich Schwierigkeiten beim Aufrufen und bei der Wartung verursacht und diese Kopplungsgrade mit der Änderung des Projekts exponentiell zunehmen, können wir die Verwendung des Vermittlermusters für den Code in Betracht ziehen.

Das obige ist der detaillierte Inhalt vonDefinition des JavaScript-Mediator-Musters und detaillierte Erläuterung der Referenzierung von Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!