JavaScript中的設(shè)計(jì)模式 單例模式
前言:
設(shè)計(jì)模式在我們編程中是十分重要的!
設(shè)計(jì)模式(Design pattern)代表了最佳的實(shí)踐,通常被有經(jīng)驗(yàn)的面向?qū)ο蟮能浖_(kāi)發(fā)人員所采用。設(shè)計(jì)模式是軟件開(kāi)發(fā)人員在軟件開(kāi)發(fā)過(guò)程中面臨的一般問(wèn)題的解決方案。這些解決方案是眾多軟件開(kāi)發(fā)人員經(jīng)過(guò)相當(dāng)長(zhǎng)的一段時(shí)間的試驗(yàn)和錯(cuò)誤總結(jié)出來(lái)的。
最近在學(xué)習(xí)設(shè)計(jì)模式,鐵鐵們一起來(lái)卷嘛?
1、什么是設(shè)計(jì)模式
在軟件設(shè)計(jì)過(guò)程中,針對(duì)特定問(wèn)題的簡(jiǎn)潔而優(yōu)雅的解決方案。
把之前的經(jīng)驗(yàn)總結(jié)并且合理運(yùn)用到某處場(chǎng)景上,能夠解決實(shí)際的問(wèn)題。
2、設(shè)計(jì)模式五大設(shè)計(jì)原則(SOLID)
S-單一職責(zé)原則
即一個(gè)程序只做好一件事
O-開(kāi)放封閉原則
可擴(kuò)展開(kāi)放,對(duì)修改封閉
L-里氏置換原則
子類(lèi)能覆蓋父類(lèi),并能出現(xiàn)在父類(lèi)出現(xiàn)的地方
I-接口獨(dú)立原則
保持接口的單一獨(dú)立
D-依賴(lài)導(dǎo)致原則
使用方法只關(guān)注接口而不關(guān)注具體類(lèi)的實(shí)現(xiàn)
3、為什么需要設(shè)計(jì)模式?
易讀性
使用設(shè)計(jì)模式能夠提升我們的代碼可讀性,提升后續(xù)開(kāi)發(fā)效率
可拓展性
使用設(shè)計(jì)模式對(duì)代碼解耦,能很好的增強(qiáng)代碼的yi修改性和拓展性
復(fù)用性
使用設(shè)計(jì)模式可以復(fù)用已有的解決方案,無(wú)需重復(fù)相同工作
可靠性
使用設(shè)計(jì)模式能夠增加系統(tǒng)的健壯性,使代碼編寫(xiě)真正工程化
4、單例模式
定義:唯一&全局訪(fǎng)問(wèn)。保證一個(gè)類(lèi)僅有一個(gè)實(shí)例,并提供一個(gè)訪(fǎng)問(wèn)它的全局訪(fǎng)問(wèn)點(diǎn)。
另外一種多例模式,通過(guò)一個(gè)類(lèi)構(gòu)造出多個(gè)不一樣的實(shí)例,這就是多例模式。
單例模式與多例模式最本質(zhì)的區(qū)別:實(shí)例的數(shù)量。
單例模式永遠(yuǎn)只有一個(gè)實(shí)例,這個(gè)實(shí)例可以被緩存起來(lái),可以復(fù)用。
應(yīng)用場(chǎng)景:就是能被緩存的內(nèi)容,例如登錄彈窗。
我覺(jué)得就是一個(gè)地方如果在你的項(xiàng)目中可以用到兩次或兩次以上,都可以嘗試一下這個(gè),能夠減少很多代碼。
來(lái)看這段偽代碼:
const creatLoginLayer = () => { const div = document.createElement("div"); div.innerHtml = "登錄浮窗"; div.style.display = "none"; document.body.appendChild(div); return div; }; document.getElementById("loginBtn").onclick = () => { const loginLayer = creatLoginLayer(); loginLayer.style.display = "block"; };
creatLoginLayer
的作用是創(chuàng)建一個(gè)登錄浮窗并將節(jié)點(diǎn)添加到body
上,下面做的是登錄按鈕的一個(gè)點(diǎn)擊事件,點(diǎn)擊登錄按鈕就會(huì)創(chuàng)建登錄浮窗并將display
從none
改為block
,將他顯示出來(lái)。
這個(gè)邏輯是沒(méi)毛病的,但是我們想一下,每點(diǎn)擊一下登錄按鈕就要執(zhí)行這些代碼,一個(gè)項(xiàng)目中如果有很多地方要呢?我們上面這短短幾行而已,如果是上百上千甚至上萬(wàn)呢?是不是就非常損耗性能,這個(gè)時(shí)候,我們的單例模式就派上了用場(chǎng)。
使用單例模式后:
const getSingle = (fn) => { let result; return (...rest) =>{ return result || (result = fn.apply(this.rest)); }; }; const creatLoginLayer = () => { const div = document.createElement("div"); div.innerHtml = "登錄浮窗"; div.style.display = "none"; document.body.appendChild(div); return div; }; const createSingleLoginLayer = getSingle(createLoginLayer); document.getElementById("loginBtn").onclick = () => { const loginLayer = createSingleLoginLayer(); loginLayer.style.display = "block"; };
可以見(jiàn)到,增加了一個(gè)getSingle
函數(shù),這里有個(gè)閉包的概念,result
變量只要一直在引用就不會(huì)被銷(xiāo)毀,起到了一個(gè)緩存的作用,函數(shù)的參數(shù)是一個(gè)function
,如果result
是null
或者undefined
就執(zhí)行后面的邏輯,將這個(gè)傳進(jìn)來(lái)的函數(shù)的返回值也就是這個(gè)div賦給result
,這樣我們下面的函數(shù)就執(zhí)行一次就可以了,下次調(diào)用的時(shí)候result
有值,所以就直接返回了,不會(huì)在執(zhí)行后面的邏輯。
到此這篇關(guān)于JavaScript
中的設(shè)計(jì)模式 單例模式的文章就介紹到這了,更多相關(guān)JavaScript
中的單例模式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信小程序左右滑動(dòng)切換頁(yè)面詳解及實(shí)例代碼
這篇文章主要介紹了微信小程序左右滑動(dòng)切換頁(yè)面詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-02-02微信公眾號(hào) 提示:Unauthorized API function 問(wèn)題解決方法
這篇文章主要介紹了微信公眾號(hào) 提示:Unauthorized API function 問(wèn)題解決方法的相關(guān)資料,這里提供了出現(xiàn)提示的解決方法,需要的朋友可以參考下2016-12-12微信小程序 倒計(jì)時(shí)組件實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序 倒計(jì)時(shí)組件實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2016-10-10