20190410期
設計模式-如何理解中介者模式?
定義: 中介者模式(Mediator),用一個中介對象來封裝一系列的對象交互。中介者使各對象不需要顯式地相互引用,從而使其耦合松散,而且可以獨立地改變它們之間的交互
把它理解成人人喊打的黑房產(chǎn)中介也沒啥問題...把租戶與房東解藕了..
現(xiàn)實中的中介者
中介者也被稱為調(diào)停者,我們想象一下機場的指揮塔,如果沒有指揮塔的存在,每一架飛機要和方圓百公里的所有飛機通信,才能確認航線以及飛行情況,現(xiàn)實中的情況是,每架飛機只需要跟指揮塔通信,指揮塔作為調(diào)停者,知道每一架飛機的飛行情況,所以它可以安排所有飛機的起降時間,及時做出航線調(diào)整
代碼中的中介者
假設我們正在編寫一個實時的表單驗證的程序,有如下需求
當用戶名未輸入時輸入密碼將提示先輸入用戶名
當密碼未輸入時輸入確認密碼將提示先輸入密碼
當性別未選擇時輸入年齡將提示先選擇性別
當點擊提交按鈕的時候如果有其它項未項寫就提示當前項不能為空
我們的實現(xiàn)偽代碼如下
passwordInput.onchange = function(){ if(!nameInput.value){ return alert('請先輸入用戶名') } } repeatPasswordInput.onchange = function(){ if(!nameInput.value){ return alert('請先輸入密碼') } } ageInputInput.onchange = function(){ if(!sexInput.value){ return alert('請先選擇性別') } } submit.onclick = function(){ if(!nameInput.value){ return alert('請先輸入用戶名') } if(!nameInput.value){ return alert('請先輸入密碼') } if(!sexInput.value){ return alert('請先選擇性別') } ajax(...) }
雖然目前順利完成了編碼,但隨之來的需求改變可能給我們帶來麻煩,現(xiàn)在這個驗證的節(jié)點還不算多,如果增加到10個或者更多,它們的關系可能變的錯綜復雜,現(xiàn)在我們來引入中介者對象,所有的節(jié)點驗證都只跟中介者通信,這樣一來,無論是修改還是新增驗證節(jié)點,我們都只需要改變中介者對象里的代碼
偽代碼如下
var mediator = (function () { return { changed: function (obj) { if (obj === passwordInput && !nameInput.value) { return alert('請先輸入用戶名') } if (obj === repeatPasswordInput && !passwordInput.value) { return alert('請先輸入密碼') } if (obj === ageInputInput && !sexInput.value) { return alert('請先選擇性別') } } }})()// 我們只需要通知中介者passwordInput.onchange = function () { mediator.changed(this)}repeatPasswordInput.onchange = function () { mediator.changed(this)}ageInputInput.onchange = function () { mediator.changed(this)}// 后面如果再增加其它節(jié)點驗證我們只要需改動mediator對象就好var mediator = (function () { / .... / return { changed: function (obj) { // 增加城市驗證 if (obj === homeInputInput && !cityInput.value) { return alert('請先選擇城市') } } }})()
總結(jié)
中介者模式用大白話翻譯指的就是一個對象應該盡可能的了解另一個對象(類似不和陌生人說話),如果對象之間的耦合性太高,一個對象發(fā)生改變之后,難免會影響到其它的對象,跟城門失火,殃及池魚的道理是一樣的,而在中介者模式里,對象之間幾乎是不知道彼此存在的,它們只能通過中介者對象來相互影響