Définition du modèle de médiateur JavaScript et explication détaillée de la façon de référencer le code

La conception orientée objet encourage la répartition des comportements entre divers objets et divise les objets en granularités plus petites, ce qui contribue à améliorer la réutilisabilité des objets. Cependant, la prolifération des connexions entre ces objets à granularité fine peut à son tour réduire leur réutilisation.

Le rôle du modèle médiateur est de rompre le couplage étroit entre les objets.

Exemple :

Supposons que nous développions une page pour acheter un téléphone mobile. Pendant le processus d'achat, vous pouvez sélectionner la couleur du téléphone mobile et saisir l'achat. quantité, et l’entrée peut être affichée en conséquence sur le contenu de la page. Il existe également un bouton qui affiche dynamiquement l'étape suivante (si le stock de cette couleur est suffisant, l'étape suivante est affichée ; sinon, le stock est insuffisant).

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

};

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

Lorsqu'une autre zone de liste déroulante est ajoutée à la page, représentant le téléphone mobile mémoire, le code ci-dessus Les changements sont énormes.

Présentation du mode intermédiaire

Tous les objets nœuds communiquent uniquement avec l'intermédiaire.
Lorsqu'un événement se produit dans la zone de sélection déroulante selColor, selMemory ou la zone de texte selNum, le médiateur sera uniquement averti qu'il a été modifié, et en même temps, se transmettra en paramètre au médiateur, donc que le médiateur peut identifier qui a changé. L'objet médiateur fait le reste.

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

Inconvénients : Le plus gros inconvénient est qu'un sera ajouté au système Objets de médiation, car la complexité de l'interaction entre les objets est transférée à la complexité de l'objet médiateur, ce qui rend l'objet médiateur souvent énorme et difficile à maintenir.

D'une manière générale, si le couplage complexe entre les objets entraîne réellement des difficultés d'appel et de maintenance, et que ces degrés de couplage augmentent de façon exponentielle à mesure que le projet évolue, alors nous pouvons envisager d'utiliser le modèle médiateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!