資訊專欄INFORMATION COLUMN
摘要：橋接模式的核心在于將抽象部分和它的實(shí)現(xiàn)部分分離，使它們都可以獨(dú)立的變化?？雌饋磉@個(gè)版本已經(jīng)很完美了不，它仍然有可以優(yōu)化的空間，即題目提到的橋接模式。使用橋接模式的實(shí)現(xiàn)版本這個(gè)實(shí)現(xiàn)包含了三個(gè)函數(shù)。這個(gè)例子體現(xiàn)了橋接模式的作用。
我寫的程序員面試系列文章
Java面試系列-webapp文件夾和WebContent文件夾的區(qū)別？
程序員面試系列：Spring MVC能響應(yīng)HTTP請(qǐng)求的原因？
Java程序員面試系列-什么是Java Marker Interface（標(biāo)記接口）
使用JDK自帶的工具jstack找出造成運(yùn)行程序死鎖的原因
編程面試題：編寫一個(gè)會(huì)造成數(shù)據(jù)庫死鎖的應(yīng)用
設(shè)計(jì)模式（Design Pattern）中的橋接模式，有的朋友平時(shí)工作可能很少用到。橋接模式的核心在于將抽象部分和它的實(shí)現(xiàn)部分分離，使它們都可以獨(dú)立的變化。聽起來很抽象，讓我們看一個(gè)具體而簡單的例子，通過這個(gè)例子一步步的完善來加深對(duì)橋接模式的理解。
很多論壇點(diǎn)登錄按鈕時(shí)，
周圍背景都會(huì)暗下來，這樣可以突出即將彈出的登錄框，讓用戶把精力集中在用戶名和密碼的輸入上去。
很多論壇對(duì)于這種背景變暗的UI實(shí)現(xiàn)，是創(chuàng)建了一個(gè)HTML原生的div元素，加上一些精心設(shè)計(jì)過背景顏色的CSS樣式來完成的。
我們下面稱這種div元素為遮罩層div元素，即mask div。
下面討論創(chuàng)建mask div的最優(yōu)解。
實(shí)現(xiàn)版本1創(chuàng)建一個(gè)createMask函數(shù)，作為登錄按鈕的事件響應(yīng)函數(shù)。每次點(diǎn)擊按鈕之后執(zhí)行該函數(shù)。
var createMask = function(){
return document.body.appendChild( document. createElement("div") );
}
$(‘#logon_button").click(function(){
var mask = createMask();
mask.show();
})
版本1的缺點(diǎn)
每次點(diǎn)擊按鈕都會(huì)創(chuàng)建一個(gè)mask div。當(dāng)然一般情況下登錄按鈕只會(huì)點(diǎn)擊一次。但是在面試場景中，面試官可能會(huì)把這個(gè)問題的討論引導(dǎo)到其他方向上。如何實(shí)現(xiàn)即使多次點(diǎn)擊按鈕，也只會(huì)創(chuàng)建一次mask div？于是就有了版本2。
實(shí)現(xiàn)版本2事先創(chuàng)建好一個(gè)mask div，放到一個(gè)全局變量里保存。這種方式有點(diǎn)像單例模式（singleton）的餓漢式單例。
var mask = document.body.appendChild(document.createElement("div" ) );
$( "#logon_button").click(function(){
mask.show();
})
版本2的缺點(diǎn)
版本2采用了一個(gè)全局變量保存事先創(chuàng)建好的mask div。還記得那句話么？全局變量是萬惡之源。
另外，假設(shè)用戶永遠(yuǎn)不點(diǎn)登錄按鈕，只是以游客身份瀏覽網(wǎng)站，那么這個(gè)mask div就白白創(chuàng)建了。
實(shí)現(xiàn)版本3
var mask;
var createMask = function(){
if(mask)
return mask;
else{
mask = document,body.appendChild( document.createElement("div") );
return mask;
}
}
版本3的缺點(diǎn)
雖然使用了飽漢式單例模式，避免了mask div在沒有點(diǎn)擊登錄按鈕的情況下不必要的創(chuàng)建，但還是使用了全局變量來存放mask div。要記住我們現(xiàn)在是在用JavaScript，因此可以用它提供的強(qiáng)大的閉包特性（closure）來實(shí)現(xiàn)不需要全局變量的飽漢式單例模式。
實(shí)現(xiàn)版本4var createMask = function() {
var mask;
return function() {
return mask || ( mask = document.body.appendChild(document.createElement("div")))；
}
}();
借助JavaScript的閉包特性，我們?cè)诘诙袆?chuàng)建的自由變量(Free variable)只在閉包內(nèi)部可見，外部消費(fèi)者感知不到這個(gè)變量，因此成為存儲(chǔ)mask div的最佳選擇。看起來這個(gè)版本已經(jīng)很完美了？不，它仍然有可以優(yōu)化的空間，即題目提到的橋接模式。
版本4的缺點(diǎn)從單一職責(zé)原理(Single Responsibility)來衡量版本4，createMask函數(shù)里實(shí)際包含了兩種不同類型的邏輯：
1. 創(chuàng)建mask div
2. 使該mask div “單例化”
我們下面使用橋接模式將這兩種邏輯分開，來實(shí)現(xiàn)最終版本。
使用橋接模式的實(shí)現(xiàn)版本5這個(gè)實(shí)現(xiàn)包含了三個(gè)JavaScript函數(shù)。首先看singleton函數(shù)。
函數(shù)singleton的輸入?yún)?shù)是另一個(gè)JavaScript函數(shù)（我稱其為原始函數(shù)），輸出是一個(gè)包裝后的函數(shù)，其內(nèi)部使用閉包，將原始函數(shù)第一次執(zhí)行的結(jié)果保存在閉包內(nèi)，當(dāng)包裝后的函數(shù)第二次執(zhí)行時(shí)，直接返回閉包內(nèi)保存的第一次執(zhí)行結(jié)果。我們可以把singleton函數(shù)當(dāng)成一個(gè)構(gòu)造器，傳入任意一個(gè)具有返回值的JavaScript函數(shù)，負(fù)責(zé)生產(chǎn)出具有“單例化”特性的新函數(shù)。
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);
然后我們調(diào)用這個(gè)singleton函數(shù)，把我們?cè)嫉膭?chuàng)建mask div的函數(shù)origin作為參數(shù)傳進(jìn)去，得到加工后的新函數(shù)createMask。
這個(gè)例子體現(xiàn)了橋接模式的作用。我們通過singleton這個(gè)單例化構(gòu)造器函數(shù)，成功將業(yè)務(wù)邏輯(創(chuàng)建mask div）和單例化這個(gè)純技術(shù)需求分離開，這樣也滿足了單一職責(zé)（single responsibility）的設(shè)計(jì)理念。要獲取更多Jerry的原創(chuàng)技術(shù)文章，請(qǐng)關(guān)注公眾號(hào)"汪子熙"或者掃描下面二維碼:
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/98590.html
摘要：采用的生成非波拉契數(shù)列提供了原生的支持，語法非常有特色，關(guān)鍵字后面緊跟一個(gè)星號(hào)。的詳細(xì)介紹參考官網(wǎng)先看如何用這個(gè)黑科技重新實(shí)現(xiàn)非波拉契樹立的生成。在這個(gè)內(nèi)部，我們定義了一個(gè)無限循環(huán)，用于計(jì)算非波拉契數(shù)列。 程序員面試系列 Java面試系列-webapp文件夾和WebContent文件夾的區(qū)別？ 程序員面試系列：Spring MVC能響應(yīng)HTTP請(qǐng)求的原因？ Java程序員面試系列-什么...
摘要：全網(wǎng)最貼心系列教程和配套代碼歡迎關(guān)注個(gè)人技術(shù)博客。所以我花費(fèi)了個(gè)多月整理了這份教程，一共分成節(jié)，每節(jié)都有講解，并且準(zhǔn)備了配套代碼。奈何深感水平不夠，只有一腔熱情，所以直接開放了教程和源碼。 webpack-demos：全網(wǎng)最貼心 webpack 系列教程和配套代碼 歡迎關(guān)注個(gè)人技術(shù)博客：godbmw.com。每周 1 篇原創(chuàng)技術(shù)分享！開源教程(webpack、設(shè)計(jì)模式）、面試刷題（偏前...
摘要：橋接模式之特權(quán)函數(shù)特權(quán)函數(shù)，用一些具有特權(quán)的方法作為橋梁以便訪問私有空間，可以回憶一下之前的系列。連續(xù)自然數(shù)分組，計(jì)算最多組的個(gè)數(shù)將至這個(gè)連續(xù)自然數(shù)分成組使每組相加的值相等。個(gè)數(shù)組中數(shù)字最多的一組有個(gè)此時(shí)的和為。 本回內(nèi)容介紹 上一回，聊了適配器模式，圖片預(yù)加載，介一回，聊橋接模式（Bridge），跟之前一樣，難度比較小，橋接模式將抽象部分與它的實(shí)現(xiàn)部分分離，通過橋接模式聯(lián)系彼此，同時(shí)...
摘要：我的目標(biāo)是使本系列成為關(guān)于應(yīng)用程序性能的完整指南。代碼分割就是將應(yīng)用程序分割成這些延遲加載的塊?？偨Y(jié)延遲加載是提高應(yīng)用程序性能并減少其大小的最佳方法之一。在本系列的下一部分中，我將向您展示如何使用和路由來分割應(yīng)用程序代碼。 當(dāng)移動(dòng)優(yōu)先（mobile-first）的方式逐漸成為一種標(biāo)準(zhǔn)，而不確定的網(wǎng)絡(luò)環(huán)境因素應(yīng)該始終是我們考慮的一點(diǎn)，因此保持讓應(yīng)用程序快速加載變得越來越困難。在本系列文章...
摘要：函數(shù)式編程前端掘金引言面向?qū)ο缶幊桃恢币詠矶际侵械闹鲗?dǎo)范式。函數(shù)式編程是一種強(qiáng)調(diào)減少對(duì)程序外部狀態(tài)產(chǎn)生改變的方式。 JavaScript 函數(shù)式編程 - 前端 - 掘金引言 面向?qū)ο缶幊桃恢币詠矶际荍avaScript中的主導(dǎo)范式。JavaScript作為一門多范式編程語言，然而，近幾年，函數(shù)式編程越來越多得受到開發(fā)者的青睞。函數(shù)式編程是一種強(qiáng)調(diào)減少對(duì)程序外部狀態(tài)產(chǎn)生改變的方式。因此，...
閱讀 4148·2021-11-17 09:33
閱讀 3344·2021-10-08 10:05
閱讀 3261·2021-09-22 15:36
閱讀 1226·2021-09-06 15:02
閱讀 2833·2019-08-29 12:45
閱讀 1648·2019-08-26 13:40
閱讀 3496·2019-08-26 13:37
閱讀 489·2019-08-26 13:37
