单例模式

1. 介绍

2. uml类图

3. demo代码

4. 经典应用场景

介绍

1. 保证全局只存在一个实例

2. 实现: 判断实例是否存在，存在则直接返回，不存在就创建了再返回

uml类图

demo代码

    class LoginForm {
      constructor() {
        this.state = 'hide'
      }
      show() {
        if (this.state === 'show') {
          alert('已经显示')
          return
        }
        this.state = 'show'
        console.log('登录框显示成功');
      }
      hide() {
        if (this.state === 'hide') {
          alert('已经隐藏')
          return
        }
        this.state = 'hide'
        console.log('登录框隐藏成功');
      }
    }
    LoginForm.getInstance = (function () {
      let instance
      return function() {
        if (!instance) {
          instance = new LoginForm()
        }
        return instance
      }
    })()
    
    // 测试
    let login1 = LoginForm.getInstance()
    login1.show()
    let login2 = LoginForm.getInstance()
    login2.show()
    
    // login1 === login2, 代码生成的是同一个实例
    console.log('login1 === login2 :>> ', login1 === login2);

经典应用场景

1. jquery的$存在

if (window.jQuery != null) {
    return window.jQuery
} else {
    // 初始化...
}

2. 购物车(和登录框类似)

3. vuex 和 redux 中的store

4. element的弹窗组件

https://github.com/ElemeFE/element/blob/dev/packages/message-box/src/main.js#L79