单例模式

Singleton

概述

一个类仅有一个实例

提供一个全局访问点

避免全局使用的类频繁的创建和销毁，占用内存

应用

弹出对话框

参考代码 - ES5

闭包实现

自执行函数：在函数内部返回函数，被外界变量引用，更多信息，请参考closure

const singleton = (function () {
  let instance;

  //创建函数也可以写在外面
  function User(name, age) {
    this.name = name
    this.age = age
  }
  return function (name, age) {
    if (!instance)
      instance = new User(name, age)
    return instance
  }
})()          

singleton('gl', 30)
singleton('gz', 40)

参考代码 - ES6

class Singleton {
  constructor(name, age) {
    if (!Singleton.instance) {
      this.name = name
      this.age = age
      Singleton.instance = this
    }
    return Singleton.instance;
  }
}

console.log(new Singleton('gl', 30) == new Singleton('gz', 40));

弹出对话框

动态创建：需要时才创建；不可以先创建再隐藏

第一次单击打开，先创建，再显示

单击关闭，隐藏

后续再次单击时，显示

let Modal = (() => {
  let instance = null
  return () => {
    if (!instance) {
      instance = document.createElement('div')
      instance.innerHTML = 'Box'
      instance.style.display = 'none'
      document.body.appendChild(instance)
    }
    return instance
  }
})()
let open = document.querySelector('#open')
open.addEventListener('click', () => {
  let singleton = Modal()
  singleton.style.display = 'block'
})
let close = document.querySelector('#close')
close.addEventListener('click', () => {
  let singleton = Modal()
  singleton.style.display = 'none'
})