设计模式知识提取将分为N篇文章，本篇文章是个开篇文，后期会进行其他相关的同步（会就分享，不会就折腾），旨在提升技能，更好地享受敲键盘的快感～
定义
单例模式保证一个类仅有一个实例，并提供一个访问它的全局访问点。实现的方法为先判断实例存在与否，如果存在则直接返回，如果不存在就创建了再返回，这就保证了一个类只有一个实例对象。
使用场景：一个单一对象。比如：弹窗，无论点击多少次，弹窗只应该被创建一次。
比如下面的代码：
class CreateUser {
constructor(name) {
this.name = name;
this.getName();
}
getName() {
return this.name;
}
}
// 代理实现单例模式
var proxyMode = (function() {
var instance = null;
return function(name) {
if(!instance) {
instance = new CreateUser(name);
}
return instance;
}
})();
// 测试单例模式
var a = proxyMode('aaa');
var b = proxyMode('bbb');
// 因为单例模式是只实例化一次，所以下面的实例是相等的
console.log(a === b); // true
// 打印下a,b连个对象的名字，其实是一个对象的名字
console.log(a.name); // aaa
console.log(b.name); // aaa
上面是讲了一些单例模式的原理，下面我们来用这个模式实现下弹窗功能。
实现一个弹窗
直接show you the code：
<button id="btn1">
点我创建新窗口
</button>
<button id="hide">
点我隐藏
</button>
.common-box {
background: rgb(233, 90, 90);
width: 100px;
height: 100px;
overflow: hidden;
}
const btn1 = document.querySelector('#btn1');
const createWindow = (() => {
let div = null;
return (words) => {
if (!div) {
div = document.createElement('div');
div.innerHTML = words || '我是默认的语句';
div.className = 'common-box';
div.style.display = 'none';
document.body.appendChild(div);
}
return div;
}
})();
btn1.addEventListener('click', ()=>{
let box = createWindow('content');
box.style.display = 'block';
}, false);
//隐藏
document.querySelector('#hide').addEventListener('click', ()=>{
document.querySelector('.common-box').style.display = 'none';
}, false);
效果如下：
singleton
参考和后话
更多的内容可以戳这里了解 逃：）
