单例模式

一个类只有唯一的实例
全局可以访问该实例
可以自动实例化
适用场景:全局的模态框，购物车，个人中心等，状态管理等。
拿模态框做个例子，点击按钮，弹出一个模态框。

// 创建一个模态框
let createMask = function () { 
  let mask = document.createElement('div')
  mask.style.background = 'red'
  mask.innerText = '模态框'
  mask.style.display = 'none'
  document.body.appendChild(mask)
  return mask
}
// 点击按钮让模态框显示显示
let btn = document.getElementById('btn')
btn.onclick = function () {
  let mask
  if (mask) {
    mask.style.display = 'block'
  }
  createMask().style.display = 'block'
}

上面的代码有什么问题呢？
每一次点击按钮都会生成一个模态框，虽然我们手动将其溢出，但是这样并不符合规范。我们把这份改成单例模式

//  创建一个静态的模态框
function createMasksStatic() {
  let mask = document.createElement('div')
  mask.style.background = 'red'
  mask.innerText = '模态框'
  return document.body.appendChild(mask)
}

//  判断是否创建过模态框
let singletoModal = function (fn) {
  let flag   // 创建标识
  return function () {
    // 假如没有创建过用标识接受返回值并改变this指向
    return flag || (flag = fn.apply(this, arguments))
  }
}

let createMask = singletoModal(createMasksStatic)
// 点击直接调用即可
btn.onclick = function () {
  createMask()
}

这样做下改造就好多了。保证在全局下有唯一的一个模态框。

优点：避免了频繁的创建销毁，减少内存占用。
缺点：不好扩展，比较多个相似场景不好扩展。