JavaScript デザインパターンの Mediator パターンを学ぶ_JavaScript スキル

1. 定義

オブジェクト指向の設計では、さまざまなオブジェクトへの動作の分散が促進され、オブジェクトがより小さな粒度に分割されるため、オブジェクトの再利用性が向上します。ただし、これらのきめの細かいオブジェクト間の接続が急増すると、再利用性が低下する可能性があります。
メディエーター パターンの役割は、オブジェクト間の密結合を解除することです。

2. 例: 商品の購入

• 携帯電話を購入するためのページを開発しているとします。購入プロセス中に、携帯電話の色を選択し、購入数量を入力すると、入力内容がそれに応じて表示されます。ページ。動的に次のステップを表示するボタンもあります（この色の在庫が十分であれば次のステップが表示され、そうでない場合は在庫が不足します）。
  

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

};

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

携帯電話のメモリを表す別のドロップダウン リスト ボックスがページに追加されると、上記のコードは大きく変わります。

3. 中間モデルの紹介

すべてのノード オブジェクトはメディエーターとのみ通信します。
ドロップダウン選択ボックス selColor、selMemory、またはテキスト ボックス selNum でイベントが発生すると、メディエーターにはそれらが変更されたことが通知されるだけであり、同時にパラメータとしてメディエーターに渡されるため、メディエーターは誰が変更したかを特定でき、残りの処理はメディエーター オブジェクトに任せて完了させます。

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

中間モデルは、デメテルの法則に適合する実装です。 デミットの法則は、最小知識の原理とも呼ばれます。これは、オブジェクトは他のオブジェクトについてできる限り最小限の知識を持たなければならないことを意味します。 「城門での火災が魚のいる池に災いをもたらす」ことを避けるため。

欠点: 最大の欠点は、オブジェクト間の対話の複雑さが中間オブジェクトの複雑さに移されるため、中間オブジェクトがシステムに追加されることです。仲介オブジェクトの作成は多くの場合、巨大で保守が困難です。

一般的に、オブジェクト間の複雑な結合により呼び出しや保守が困難になり、プロジェクトの変更に伴ってこれらの結合度が指数関数的に増加する場合は、メディエーター パターンを使用してコードをリファクタリングすることを検討できます。

この記事が JavaScript プログラミングを学習するすべての人に役立つことを願っています。