【設計模式系列】之【單例模式】

前言：要提升代碼水平，就繞不開設計模式。之前也有過一些瞭解，但並沒有深入學習。最近準備系統的學習一下設計模式，提高設計，解耦的能力，發現了一本好書《JavaScript設計模式與開發實踐》，所以邊讀邊寫，把常用的設計模式學習並記錄在這裏。

定義與介紹

單例模式的定義：確保只有一個實例，並提供全局訪問。

要實現一個標準的單例模式並不複雜，無非是用一個變量來標誌當前是否已經有了這個單例，若是則直接返回已創建的對象。

JavaScript中的單例模式

由於JavaScript中本身就沒有類的概念，所以對於JavaScript中的單例來說，創建類是多此一舉。另外，爲了變量污染，一般使用命名空間或者閉包來標記單例是否已經存在。

惰性單例

惰性單例指的是在需要的時候才創建該實例，而不是已開始就創建。

將創建對象和管理單例的邏輯解耦

我們可以寫一個通用的創建單例的方法：

const getSingle = (fn) => {
	let result;
	// 返回的是一個方法
	// 這個方法不要用箭頭函數，因爲會綁定this，我們不希望綁定
	return function() {
	    // 這裏的this是調用改函數的對象
		return result || (result = fn.apply(this, arguments));
	}
}

// 上邊的代碼中，注意
return a = b;
// 等價於
a = b;
return b;

單例模式的例子

我們有一個全局唯一的登錄彈窗，第一次點擊按鈕時創建(惰性單例)，之後點擊切換顯示即可。

const createLoginLayer = () => {
	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';
}