我寫的程序員面試系列文章
設計模式(Design Pattern)中的橋接模式,有的朋友平時工作可能很少用到。橋接模式的核心在於將抽象部分和它的實現部分分離,使它們都可以獨立的變化。聽起來很抽象,讓我們看一個具體而簡單的例子,通過這個例子一步步的完善來加深對橋接模式的理解。
很多論壇點登錄按鈕時,
周圍背景都會暗下來,這樣可以突出即將彈出的登錄框,讓用戶把精力集中在用戶名和密碼的輸入上去。
很多論壇對於這種背景變暗的UI實現,是創建了一個HTML原生的div元素,加上一些精心設計過背景顏色的CSS樣式來完成的。
我們下面稱這種div元素為遮罩層div元素,即mask div。
下面討論創建mask div的最優解。
實現版本1
創建一個createMask函數,作為登錄按鈕的事件響應函數。每次點擊按鈕之後執行該函數。
var createMask = function(){
return document.body.appendChild( document. createElement('div') );
}
$(‘#logon_button').click(function(){
var mask = createMask();
mask.show();
})
版本1的缺點
每次點擊按鈕都會創建一個mask div。當然一般情況下登錄按鈕只會點擊一次。但是在面試場景中,面試官可能會把這個問題的討論引導到其他方向上。如何實現即使多次點擊按鈕,也只會創建一次mask div?於是就有了版本2。
實現版本2
事先創建好一個mask div,放到一個全局變量裡保存。這種方式有點像單例模式(singleton)的餓漢式單例。
var mask = document.body.appendChild(document.createElement('div' ) );
$( '#logon_button').click(function(){
mask.show();
})
版本2的缺點
版本2採用了一個全局變量保存事先創建好的mask div。還記得那句話麼?全局變量是萬惡之源。
另外,假設用戶永遠不點登錄按鈕,只是以遊客身份瀏覽網站,那麼這個mask div就白白創建了。
實現版本3
var mask;
var createMask = function(){
if(mask)
return mask;
else{
mask = document,body.appendChild( document.createElement('div') );
return mask;
}
}
版本3的缺點
雖然使用了飽漢式單例模式,避免了mask div在沒有點擊登錄按鈕的情況下不必要的創建,但還是使用了全局變量來存放mask div。要記住我們現在是在用JavaScript,因此可以用它提供的強大的閉包特性(closure)來實現不需要全局變量的飽漢式單例模式。
實現版本4
var createMask = function() {
var mask;
return function() {
return mask || ( mask = document.body.appendChild(document.createElement('div')));
}
}();
藉助JavaScript的閉包特性,我們在第二行創建的自由變量(Free variable)只在閉包內部可見,外部消費者感知不到這個變量,因此成為存儲mask div的最佳選擇。看起來這個版本已經很完美了?不,它仍然有可以優化的空間,即題目提到的橋接模式。
版本4的缺點
從單一職責原理(Single Responsibility)來衡量版本4,createMask函數里實際包含了兩種不同類型的邏輯:
1. 創建mask div
2. 使該mask div “單例化”
我們下面使用橋接模式將這兩種邏輯分開,來實現最終版本。
使用橋接模式的實現版本5
這個實現包含了三個JavaScript函數。首先看singleton函數。
函數singleton的輸入參數是另一個JavaScript函數(我稱其為原始函數),輸出是一個包裝後的函數,其內部使用閉包,將原始函數第一次執行的結果保存在閉包內,當包裝後的函數第二次執行時,直接返回閉包內保存的第一次執行結果。我們可以把singleton函數當成一個構造器,傳入任意一個具有返回值的JavaScript函數,負責生產出具有“單例化”特性的新函數。
var singleton = function(fn){
var result;
return function() {
return result || ( result = fn.apply(this,arguments));
}
}
var origin = function(){
return document.body.appendChild(document.createElement('div'));
};
var createMask = singleton(origin);
然後我們調用這個singleton函數,把我們原始的創建mask div的函數origin作為參數傳進去,得到加工後的新函數createMask。
這個例子體現了橋接模式的作用。我們通過singleton這個單例化構造器函數,成功將業務邏輯(創建mask div)和單例化這個純技術需求分離開,這樣也滿足了單一職責(single responsibility)的設計理念。
閱讀更多 汪子熙的游泳故事 的文章