JavaScript中的設計模式 單例模式
目錄
- 1、什麼是設計模式
- 2、設計模式五大設計原則（SOLID）
- 3、為什麼需要設計模式？
- 4、單例模式
前言：
設計模式在我們中是十分重要的！
設計模式（Design pattern）代表了最佳的實踐，通常被有經驗的面向物件的軟體開發人員所採用。設計模式是軟體開發人員在軟體開發過程中面臨的一般問題的解決方案。這些解決方案是眾多軟體開發人員經過相當長的一段時間的試驗和錯誤總結出來的。
最近在學習設計模式，鐵鐵們一起來卷嘛？
1、什麼是設計模式
在軟體設計過程中，針對特定問題的簡潔而優雅的解決方案。
把之前的經驗總結並且合理運用到某處場景上，能夠解決實際的問題。
2、設計模式五大設計原則（SOLID）
S-單一職責原則
即一個程式只做好一件事
O-開放封閉原則
可擴充套件開放，對修改封閉
L-里氏置換原則
子類能覆蓋父類，並能出現在父類出現的地方
I-介面獨立原則
保持介面的單一http://www.cppcns.com獨立
D-依賴導致原則
使用方法只關注介面而不關注具體類的實現
3、為什麼需要設計模式？
易讀性
使用設計模式能夠提升我們的程式碼可讀性，提升後續開發效率
可拓展性
使用設計模式對程式碼解耦，能很好的增強程式碼的yi修改性和拓展性
複用性
使用設計模式可以複用已有的解決方案，無需重複http://www.cppcns.com相同工作
可靠性
使用設計模式能夠增加系統的健壯性，使程式碼編寫真正工程化
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，將他顯示出來http://www.cppcns.com。
這個邏輯是沒毛病的，但是我們想一下，每點選一下登入按鈕就要執行這些程式碼，一個專案中如果有很多地方要呢？我們上面這短短几行而已，如果是上百上千甚至上萬呢？是不是就非常損耗效能，這個時候，我們的單例模式就派上了用場。
使用單例模式後：
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變數只要一直在引用就不會被銷燬，起到了一個快取www.cppcns.com的作用，函式的引數是一個function，如果result是null或者undefined就執行後面的邏輯，將這個傳進來的函式的返回值也就是這個div賦給result，這樣我們下面的函式就執行一次就可以了，下次呼叫的時候result有值，所以就直接返回了，不會在執行後面的邏輯。
到此這篇關於中的設計模式 單例模式的文章就介紹到這了,更多相關Script中的單例模式內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！