中介者模式 -- 前端角度（三） · 前端知識 -- 學習整理

>[success] # 書中的第二個案例 -- 一個購買手機的案例 ~~~ 1.一個手機購買的頁面，通過用戶選擇一些在商城關于手機的信息，來提示用戶手機還有還剩多少 ~~~ ![](https://img.kancloud.cn/0e/4b/0e4b8b6aab93fac1d3867ac9ae59b61e_423x186.png) >[info] ## 傳統思路的代碼實現 ~~~ 1.最簡單最傳統的思路就是，去監聽顏色的'下拉框觸發的onchange事件'，輸入'購買數量框的onInput事件' ,這些事件改變的時候走我們的判斷邏輯，來判斷手機庫存的量 2.但這時候有個問題，如果后續我們希望給用戶一個可以選擇手機內存的選項，你需要依舊做一個事去監聽選擇手機內存的觸發事件來判斷手機的內存，這樣維護起來必然不是我們想要的 ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <span>選擇顏色:</span> <select id="colorSelect"> <option value="">請選擇</option> <option value="red">紅色</option> <option value="blue">藍色</option> </select> </div> <div> <span>輸入購買數量:</span> <input type="text" id="numberInput"/> </div> <span>您選擇了顏色:</span> <div id="colorInfo"></div><br/> <span>您輸入了數量:</span> <div id="numberInfo"></div><br/> <button id="nextBtn" disabled="true">請選擇手機顏色和購買數量</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 ]; // 該顏色手機對應的當前庫存 numberInfo.innerHTML = number; 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> ~~~ >[info] ## 利用中介者模式來實現 ~~~ 1.現在我們來引入中介者對象，所有的節點對象只跟中介者通信。當下拉選擇框 colorSelect、 memorySelect 和文本輸入框 numberInput 發生了事件行為時，它們僅僅通知中介者它們被改變了，同時把自身當作參數傳入中介者，以便中介者辨別是誰發生了改變。 2.所有事情都交給中介者對象來完成，這樣一來，無論是修改還是新增節點，都只需要改動中介者對象里的代碼。 ~~~ >[danger] ##### 代碼實現（中介者） ~~~ 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 - 0 ) | 0 ) !== number - 0 ){ // 輸入購買數量是否為正整數 nextBtn.disabled = true; nextBtn.innerHTML = '請輸入正確的購買數量'; return; } nextBtn.disabled = false; nextBtn.innerHTML = '放入購物車'; } } })(); ~~~ >[danger] ##### 代碼調用 ~~~ // 事件函數： colorSelect.onchange = function(){ mediator.changed( this ); }; memorySelect.onchange = function(){ mediator.changed( this ); }; numberInput.oninput = function(){ mediator.changed( this ); }; ~~~