【设计模式系列】之【单例模式】

前言：要提升代码水平，就绕不开设计模式。之前也有过一些了解，但并没有深入学习。最近准备系统的学习一下设计模式，提高设计，解耦的能力，发现了一本好书《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';
}