Ketahui Corak Pengantara bagi kemahiran Corak Reka Bentuk JavaScript

Ketahui Corak Pengantara bagi kemahiran Corak Reka Bentuk JavaScript_javascript

WBOY

Lepaskan： 2016-05-16 15:19:43

asal

1350 orang telah melayarinya

1. Definisi

Reka bentuk berorientasikan objek menggalakkan pengedaran gelagat kepada pelbagai objek dan membahagikan objek kepada butiran yang lebih kecil, yang membantu meningkatkan kebolehgunaan semula objek. Walau bagaimanapun, percambahan sambungan antara objek berbutir halus ini seterusnya boleh mengurangkan kebolehgunaannya semula.
Peranan corak mediator adalah untuk memecahkan gandingan ketat antara objek.

2. Contoh: Beli barang

Andaikan kami sedang membangunkan halaman untuk membeli telefon bimbit Semasa proses pembelian, anda boleh memilih warna telefon bimbit dan memasukkan kuantiti pembelian, dan kandungan input boleh dipaparkan dengan sewajarnya pada. halaman tersebut. Terdapat juga butang yang memaparkan langkah seterusnya secara dinamik (jika stok warna ini mencukupi, langkah seterusnya dipaparkan; jika tidak, stok tidak mencukupi).

<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>

Salin selepas log masuk

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

};

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

Salin selepas log masuk

Apabila satu lagi kotak senarai juntai bawah ditambahkan pada halaman, mewakili memori telefon mudah alih, kod di atas berubah dengan ketara.

3. Memperkenalkan model pengantara

Semua objek nod hanya berkomunikasi dengan pengantara.
Apabila peristiwa berlaku dalam kotak pilihan juntai bawah selColor, selMemory atau kotak teks selNum, pengantara hanya dimaklumkan bahawa ia telah ditukar, dan pada masa yang sama, ia dihantar kepada pengantara sebagai parameter, supaya pengantara boleh mengenal pasti siapa yang telah berubah, dan selebihnya Perkara diserahkan kepada objek pengantara untuk diselesaikan.

<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>

Salin selepas log masuk

// 库存量
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);
}

Salin selepas log masuk

Model pengantara ialah pelaksanaan yang memenuhi Undang-undang Demeter. Undang-undang Demit juga dipanggil prinsip pengetahuan yang paling sedikit, yang bermaksud bahawa objek harus mengetahui sesedikit mungkin tentang objek lain. Untuk mengelakkan "kebakaran di pintu bandar, menyebabkan bencana kepada kolam ikan".

Kelemahan: Kelemahan terbesar ialah objek perantara akan ditambahkan pada sistem, kerana kerumitan interaksi antara objek dipindahkan kepada kerumitan objek perantara, membuat perantara Objek selalunya besar dan sukar untuk dikekalkan.

Secara umumnya, jika gandingan kompleks antara objek memang menyebabkan kesukaran dalam memanggil dan menyelenggara, dan darjah gandingan ini meningkat secara eksponen apabila projek berubah, maka kita boleh mempertimbangkan untuk menggunakan corak pengantara untuk memfaktorkan semula kod.

Saya harap artikel ini akan membantu semua orang yang mempelajari pengaturcaraan JavaScript.