单例模式

◆ 系统中被唯一使用
◆ 一个类只有一个实例

应用场景：
◆ 登录框
◆ 购物车
◆ jQuery只有一个$
◆ vuex和redux中的store

单例模式符合下列设计原则:
◆ 符合单一职责原则，只实例化唯一的对象
◆ 没法具体开放封闭原则，但是绝对不违反开放封闭原则

1. 单例模式demo

image.png

class SingleObject {
    login() {
        console.log('login...')
    }
}
SingleObject.getInstance = (function () {
    let instance
    return function () {
        if (!instance) {
            instance = new SingleObject();
        }
        return instance
    }
})()

// 测试
let obj1 = SingleObject.getInstance()
obj1.login()
let obj2 = SingleObject.getInstance()
obj2.login()
console.log(obj1 === obj2) // true

let obj3 = new SingleObject()
obj3.login()
console.log('obj1 === obj3', obj1 === obj3) // false

getInstance是静态方法，无论SingleObject new多少次，getInstance也只有一个，相反login()方法，new一次就生成一个。

2. jQuery只有一个$

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

3. 模拟登陆框

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()
// login1.hide()

// 另一个页面中调用登录框
let login2 = LoginForm.getInstance()
login2.show()

// 两者是否相等
console.log('login1 === login2', login1 === login2)