Apprenez le modèle médiateur des compétences JavaScript Design Patterns_javascript

1. Définition

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.

2. Exemple : Acheter des biens

• Supposons que nous développions une page pour l'achat d'un téléphone mobile. Pendant le processus d'achat, vous pouvez sélectionner la couleur du téléphone mobile et saisir la quantité achetée, et le contenu saisi peut être affiché en conséquence sur. 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).
  

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

};

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

Lorsqu'une autre zone de liste déroulante est ajoutée à la page, représentant la mémoire du téléphone mobile, le code ci-dessus change considérablement.

3. Présentation du modèle intermédiaire

Tous les objets nœuds communiquent uniquement avec le médiateur.
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 est uniquement informé qu'ils ont été modifiés, et en même temps, il est transmis au médiateur en tant que paramètre, afin que le médiateur peut identifier qui a changé, et le reste Les choses sont laissées à l'objet médiateur pour terminer.

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

Le modèle intermédiaire est une implémentation qui répond à la loi de Déméter. La loi de Demit est également appelée principe de moindre connaissance, ce qui signifie qu'un objet doit en savoir le moins possible sur les autres objets. Pour éviter "un incendie à la porte de la ville, provoquant un désastre dans l'étang à poissons".

Inconvénients : Le plus gros inconvénient est qu'un objet intermédiaire sera ajouté au système, car la complexité de l'interaction entre les objets est transférée à la complexité de l'objet intermédiaire, faire l'intermédiaire Les objets sont souvent énormes et difficiles à entretenir.

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

J'espère que cet article sera utile à tous ceux qui apprennent la programmation JavaScript.