JavaScript設計模式--中介者模式


一、定義

面向對象設計鼓勵將行為分布到各個對象中,把對象划分成更小的粒度,有助於增強對象的可復用性。但由於這些細粒度對象之間的聯系激增,又可能反過來降低它們的可復用性。
中介者模式的作用就是解除對象與對象之間的緊耦合關系。

二、示例:購買商品

假設我們正在開發一個購買手機的頁面,購買流程中,可以選擇手機顏色以及輸入購買數量,同時頁面中可以對應展示輸入內容。還有一個按鈕動態顯示下一步操作(該顏色庫存量充足,顯示下一步;否則顯示庫存不足)。

<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 = "加入購物車";

};

/* 購買數量做同樣處理 */

當頁面中新增加另外一個下拉列表框,代表手機內存,上述代碼改動面很大。

三、引入中介模式

所有的節點對象只跟中介者通信。
當下拉選擇框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);
}

中介者模式是迎合迪米特法則的一種實現。迪米特法則也叫最少知識原則,是指一個對象應該盡可能少地了解另外的對象。避免“城門失火,殃及魚池”。

缺點:最大的缺點是系統中會增加一個中介對象,因為對象之間交互的復雜性,轉移成了中介對象的復雜性,使得中介者對象經常是巨大的,很難維護。

一般來說,如果對象之間的復雜耦合確實導致調用和維護出現了困難,而且這些耦合度隨項目的變化呈指數增長,那么我們可以考慮用中介者模式來重構代碼。

轉載請標明出處:http://blog.csdn.net/ligang2585116


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com