单例模式

单例模式：限制类实例化次数只能一次，一个类只有一个实例，并提供一个访问它的全局访问点。

单例模式是创建型设计模式的一种。针对全局仅需一个对象的场景，如线程池、全局缓存、window 对象等。

特点：

• 类只有一个实例
• 全局可访问该实例
• 自行实例化（主动实例化）
• 可推迟初始化，即延迟执行（与静态类/对象的区别）

用一个登录弹窗讲解

1. 页面初始化创建弹窗 缺点：如果没有使用也会 创建 造成资源浪费

    var $div = document.createElement('div')
    $div.innerHTML = '我是登录弹窗'
    $div.style.display = 'none'

    document.querySelector('#btn').onclick = function(){
      $div.style.display = 'block'
      document.body.appendChild($div)
    }

2. 点击时再创建弹窗 关闭按钮销毁弹窗 缺点： 每一次点击都要创建弹窗

    function createLogin(){
      var $div = document.createElement('div')
      $div.innerHTML = '我是登录弹窗'
      $div.style.display = 'block'
      document.body.appendChild($div)
      // 里面实现 点击关闭按钮 销毁弹窗 （不是重点，没有实现）
    }
    document.querySelector('#btn').onclick = function(){
      createLogin()
    }

3. 单列模式

    // 如果已经创建过直接返回 ，如果没有创建，那么就创建
    function createSingle(fn) {
      var r;
      //  fn.apply(this, arguments)  apply 保存执行上行文，并且可以传入参数
      return function(){
        return r || (r = fn.apply(this, arguments))
      }      
    }

    function createLogin() {
      var $div = document.createElement('div')
      $div.innerHTML = '我是登录弹窗'
      $div.style.display = 'block'
      document.body.appendChild($div)
      // 这里要返回 $div  createSingle才能 得到返回值
      return $div
    }

    var loginDom = createSingle(createLogin)

    document.querySelector('#btn').onclick = function () {
      loginDom()
    }

ES6 实现单例模式

    class Login {
      constructor() {
        var $div = document.createElement('div')
        $div.innerHTML = '我是登录弹窗'
        $div.style.display = 'block'
        document.body.appendChild($div)
        console.log('执行了');
      }
      // static 静态返回不会被实例继承  只有类原型可以调用
      static create() {
        if (!this.instance) {
          this.instance = new Login()
        }
        return this.instance
      }
    }

    document.querySelector('#btn').onclick = function () {
      Login.create()
    }