何为单例模式？顾名思义，单例模式就是保证一个类仅有一个实例，也就是创建出来的两个实例必须相等！
构造函数静态属性创建单例
function Singleton() {
// 已有实例则返回该实例，没有则创建实例
if (typeof Singleton.instance === 'object') {
return Singleton.instance
}
// 把自己绑定到insta静态属性上，保证每次创建相同实例
Singleton.instance = this
}
var sigle1 = new Singleton()
var sigle2 = new Singleton()
console.log(sigle1 === sigle2) // true 两个实例相等
sigle1.instance = 123
console.log(sigle2.instance) // 123
该方法的缺点是，instance属性暴露外面，改变一个实例的属性，另一个也会跟着改变！ 实例sigle1.instance的改变的同时sigle2.instance也跟着同时也变化了，这不是我们希望要的结果！
构造函数创建不透明单例
const Singleton = function (name) {
this.name = name
this.instance = null
}
Singleton.getInstance = function (name) {
// 单例已创建则返回，未创建则创建并返归
return this.instance || (this.instance = new Singleton(name))
}
Singleton.prototype.getName = function () {
return this.name
}
var instance1 = Singleton.getInstance('instance1')
var instance2 = Singleton.getInstance('instance2')
console.log(instance1 === instance2) // true 两个实例相等
console.log(instance1.getName(), instance2.getName()) // instance1 instance1
和上一个案例类似，利用构造函数的静态熟悉存储单例，但是该单例并不能改变instance属性。然而，该方法创建单例具有不透明性，需要具体告知用户如何使用。
利用闭包创建单例
function Singleton() {
var Man = function (name) {
this.name = name
}
var instance
// 函数中返回函数，且返回函数中占用instance，形成闭包，instance唯一
return function (arg) {
if (!instance) {
instance = new Man(arg)
}
return instance
}
}
var single = Singleton()
console.log(single('tom') === single('jack')) // true 两个实例相等
和上面一个案例一样，用闭包创建单例具有不透明性，而且容易造成内存泄漏。好了说了这么多实现单例的方式，接下来说说单例在工作中的具体使用情况。
单例的实际使用
我们html页面中的提示遮罩框就可以使用单例来创建，因为创建一次，重复使用，没必要再次创建相同遮罩框。这边我就不写具体遮罩框的样式了，嘿嘿。
// 在html页面创建点击按钮
<button id="app">点我创建单例</button>
// 利用立即执行函数创建遮罩框layer
var creatLayer = (function(innerHTML){
var layer
return function(innerHTML){
if(!layer){
layer = document.createElement('div')
layer.innerHTML = innerHTML
layer.style.display = 'none'
document.body.appendChild(layer)
}
return layer
}
})()
// 点击按钮弹出遮罩框
document.getElementById('app').onclick = function(){
var layer = creatLayer('我是遮罩框')
layer.style.display = 'block'
}
无论按钮点击多少次，始终只有创建一个遮罩框，从而避免重复创建。不过边creatLayer函数中含有大量业务代码。遵循高内聚，低耦合的思想，我们进行改造！
// 把业务代码写到creatLayer函数
var creatLayer = function (innerHTML) {
var layer = document.createElement('div')
layer.innerHTML = innerHTML
layer.style.display = 'none'
document.body.appendChild(layer)
return layer
}
// 单例单例判断交给getSingle函数，和业务逻辑分开
var getSingle = function (fn) {
var div
return function () {
return div || (div = fn.apply(this, arguments))
}
}
var layer = getSingle(creatLayer)
document.getElementById('app').onclick = function () {
var div = layer('我是遮罩框')
div.style.display = 'block'
}
好了，单例模式具体介绍到这里了。如果想看更多的设计模式，可以看我晚期设计模式系列文章。如果觉得对你有帮助的话，记得给个赞哈😃
