JavaScript中如何實現單例模式

這篇文章主要為大家展示了“JavaScript中如何實現單例模式”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“JavaScript中如何實現單例模式”這篇文章吧。

前言：

設計模式在我們編程中是十分重要的！

設計模式（Design pattern）代表了最佳的實踐，通常被有經驗的面向對象的軟件開發人員所采用。設計模式是軟件開發人員在軟件開發過程中面臨的一般問題的解決方案。這些解決方案是眾多軟件開發人員經過相當長的一段時間的試驗和錯誤總結出來的。

最近在學習設計模式，鐵鐵們一起來卷嘛？

1、什么是設計模式

在軟件設計過程中，針對特定問題的簡潔而優雅的解決方案。

把之前的經驗總結并且合理運用到某處場景上，能夠解決實際的問題。

2、設計模式五大設計原則（SOLID）

S-單一職責原則

即一個程序只做好一件事

O-開放封閉原則

可擴展開放，對修改封閉

L-里氏置換原則

子類能覆蓋父類，并能出現在父類出現的地方

I-接口獨立原則

保持接口的單一獨立

D-依賴導致原則

使用方法只關注接口而不關注具體類的實現

3、為什么需要設計模式？

易讀性

使用設計模式能夠提升我們的代碼可讀性，提升后續開發效率

可拓展性

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

復用性

使用設計模式可以復用已有的解決方案，無需重復相同工作

可靠性

使用設計模式能夠增加系統的健壯性，使代碼編寫真正工程化

4、單例模式

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

另外一種多例模式，通過一個類構造出多個不一樣的實例，這就是多例模式。

單例模式與多例模式最本質的區別：實例的數量。

單例模式永遠只有一個實例，這個實例可以被緩存起來，可以復用。

應用場景：就是能被緩存的內容，例如登錄彈窗。

我覺得就是一個地方如果在你的項目中可以用到兩次或兩次以上，都可以嘗試一下這個，能夠減少很多代碼。

來看這段偽代碼：

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的作用是創建一個登錄浮窗并將節點添加到body上，下面做的是登錄按鈕的一個點擊事件，點擊登錄按鈕就會創建登錄浮窗并將display從none改為block，將他顯示出來。

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

使用單例模式后：

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函數，這里有個閉包的概念，result變量只要一直在引用就不會被銷毀，起到了一個緩存的作用，函數的參數是一個function，如果result是null或者undefined就執行后面的邏輯，將這個傳進來的函數的返回值也就是這個div賦給result，這樣我們下面的函數就執行一次就可以了，下次調用的時候result有值，所以就直接返回了，不會在執行后面的邏輯。

以上是“JavaScript中如何實現單例模式”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！