欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript中的設(shè)計模式 單例模式

 更新時間:2021年09月25日 11:46:58   作者:Ned  
這篇文章主要給大家介紹的是JavaScript中的單例模式,設(shè)計模式代表了最佳的實踐,通常被有經(jīng)驗的面向?qū)ο蟮能浖_發(fā)人員所采用。設(shè)計模式是軟件開發(fā)人員在軟件開發(fā)過程中面臨的一般問題的解決方案,需要的朋友可以參考一下

前言:

設(shè)計模式在我們編程中是十分重要的!

設(shè)計模式(Design pattern)代表了最佳的實踐,通常被有經(jīng)驗的面向?qū)ο蟮能浖_發(fā)人員所采用。設(shè)計模式是軟件開發(fā)人員在軟件開發(fā)過程中面臨的一般問題的解決方案。這些解決方案是眾多軟件開發(fā)人員經(jīng)過相當長的一段時間的試驗和錯誤總結(jié)出來的。

最近在學(xué)習設(shè)計模式,鐵鐵們一起來卷嘛?

1、什么是設(shè)計模式

在軟件設(shè)計過程中,針對特定問題的簡潔而優(yōu)雅的解決方案。

把之前的經(jīng)驗總結(jié)并且合理運用到某處場景上,能夠解決實際的問題。

2、設(shè)計模式五大設(shè)計原則(SOLID)

S-單一職責原則

即一個程序只做好一件事

O-開放封閉原則

可擴展開放,對修改封閉

L-里氏置換原則

子類能覆蓋父類,并能出現(xiàn)在父類出現(xiàn)的地方

I-接口獨立原則

保持接口的單一獨立

D-依賴導(dǎo)致原則

使用方法只關(guān)注接口而不關(guān)注具體類的實現(xiàn)

3、為什么需要設(shè)計模式?

易讀性

使用設(shè)計模式能夠提升我們的代碼可讀性,提升后續(xù)開發(fā)效率

可拓展性

使用設(shè)計模式對代碼解耦,能很好的增強代碼的yi修改性和拓展性

復(fù)用性

使用設(shè)計模式可以復(fù)用已有的解決方案,無需重復(fù)相同工作

可靠性

使用設(shè)計模式能夠增加系統(tǒng)的健壯性,使代碼編寫真正工程化

4、單例模式

定義:唯一&全局訪問。保證一個類僅有一個實例,并提供一個訪問它的全局訪問點。

另外一種多例模式,通過一個類構(gòu)造出多個不一樣的實例,這就是多例模式。

單例模式與多例模式最本質(zhì)的區(qū)別:實例的數(shù)量。

單例模式永遠只有一個實例,這個實例可以被緩存起來,可以復(fù)用。

應(yīng)用場景:就是能被緩存的內(nè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)建一個登錄浮窗并將節(jié)點添加到body上,下面做的是登錄按鈕的一個點擊事件,點擊登錄按鈕就會創(chuàng)建登錄浮窗并將displaynone改為block,將他顯示出來。

這個邏輯是沒毛病的,但是我們想一下,每點擊一下登錄按鈕就要執(zhí)行這些代碼,一個項目中如果有很多地方要呢?我們上面這短短幾行而已,如果是上百上千甚至上萬呢?是不是就非常損耗性能,這個時候,我們的單例模式就派上了用場。

使用單例模式后:

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";
};

可以見到,增加了一個getSingle函數(shù),這里有個閉包的概念,result變量只要一直在引用就不會被銷毀,起到了一個緩存的作用,函數(shù)的參數(shù)是一個function,如果resultnull或者undefined就執(zhí)行后面的邏輯,將這個傳進來的函數(shù)的返回值也就是這個div賦給result,這樣我們下面的函數(shù)就執(zhí)行一次就可以了,下次調(diào)用的時候result有值,所以就直接返回了,不會在執(zhí)行后面的邏輯。

到此這篇關(guān)于JavaScript中的設(shè)計模式 單例模式的文章就介紹到這了,更多相關(guān)JavaScript中的單例模式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論