溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“javascript中介者模式的代碼怎么寫”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“javascript中介者模式的代碼怎么寫”文章能幫助大家解決問題。
中介者對象踐行了最少知識原則，指一個對象盡可能少的了解別的對象，從而盡量減少對象間耦合程度。這樣各個對象只需關注自身實現邏輯，對象間的交互關系交由中介者對象來實現和維護。
手機購買頁面，在購買流程中，可以選擇手機的顏色及輸入購買數量，同時頁面有兩個展示區域，分別向用戶展示剛選擇好的顏色和數量。還有一個按鈕動態顯示下一步的操作，我們需要查詢該顏色手機對應的庫存，如果庫存數量少于這次購買的數量，按鈕將被禁用并顯示庫存不足，反之按鈕可以點擊并顯示放入購物車。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>中介者模式 購買商品</title>
</head>
<body>
選擇顏色：
<select id="colorSelect">
<option value="">請選擇</option>
<option value="red">紅色</option>
<option value="blue">藍色</option>
</select>
輸入購買數量：
<input type="text" id="numberInput">
您選擇了顏色：<div id="colorInfo"></div><br>
您輸入了數量：<div id="numberInfo"></div><br>
<button id="nextBtn" disabled>請選擇手機顏色和購買數量</button>
</body>
<script>
// 最初級的寫法
var colorSelect = document.getElementById('colorSelect'),
numberInput = document.getElementById('numberInput'),
colorInfo = document.getElementById('colorInfo'),
numberInfo = document.getElementById('numberInfo'),
nextBtn = document.getElementById('nextBtn');
var goods = {
'red': 3,
'blue': 6
}
colorSelect.onchange = function(){
var color = this.value,
number = numberInput.value,
stock = goods[color]
colorInfo.innerHTML = color;
if(!color){
nextBtn.disabled = true;
nextBtn.innerHTML = '請選擇手機顏色';
return;
}
if( ( (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 = '放入購物車';
}
numberInput.oninput = function(){
var color = colorSelect.value,
number = this.value,
stock = goods[color]
colorInfo.innerHTML = color;
if(!color){
nextBtn.disabled = true;
nextBtn.innerHTML = '請選擇手機顏色';
return;
}
if( ( (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 = '放入購物車';
}
</script>
</html>在上個示例中，對象間聯系高度耦合，只是兩個輸入框還好，但如果有多個的話，相互聯系就非常復雜了，此時就要考慮用到中介者模式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>中介者模式 購買商品</title>
</head>
<body>
選擇顏色：
<select id="colorSelect">
<option value="">請選擇</option>
<option value="red">紅色</option>
<option value="blue">藍色</option>
</select>
選擇內存：
<select id="memorySelect">
<option value="">請選擇</option>
<option value="32G">32G</option>
<option value="16G">16G</option>
</select>
輸入購買數量：
<input type="text" id="numberInput">
您選擇了顏色：<div id="colorInfo"></div><br>
您選擇了內存：<div id="memoryInfo"></div><br>
您輸入了數量：<div id="numberInfo"></div><br>
<button id="nextBtn" disabled>請選擇手機顏色、內存和購買數量</button>
</body>
<script>
var goods = {
'red|32G': 3,
'red|16G': 0,
'blue|32G': 1,
'blue|16G': 6
}
//引入中介者
var mediator = (function(){
var colorSelect = document.getElementById('colorSelect'),
memorySelect = document.getElementById('memorySelect'),
numberInput = document.getElementById('numberInput'),
colorInfo = document.getElementById('colorInfo'),
memoryInfo = document.getElementById('memoryInfo'),
numberInfo = document.getElementById('numberInfo'),
nextBtn = document.getElementById('nextBtn');
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){
memoryInfo.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){
nextBtn.disabled = true;
nextBtn.innerHTML = '請填寫手機數量';
return;
}
if( ( (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)
}
//以后如果想要再增加選項，如手機CPU之類的，只需在中介者對象里加上相應配置即可。
</script>
</html>在實際開發中，還是要注意選擇利弊，中介者對象因為包含對象間交互的復雜性，所以維護成本可能也會較高。在實際開發中，最優目的還是要快速完成項目交付，而非過度設計和堆砌模式。有時對象間的耦合也是有必要的，只有當對象間復雜耦合確實已經導致調用與維護難以為繼，才考慮用中介者模式。
關于“javascript中介者模式的代碼怎么寫”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
