单例模式的理解及使用JavaScript实现

单例模式

单例模式（Singleton Pattern）是 Java 中最简单的设计模式之一。这种类型的设计模式属于创建型模式，它提供了一种创建对象的最佳方式。

这种模式涉及到一个单一的类，该类负责创建自己的对象，同时确保只有单个对象被创建。这个类提供了一种访问其唯一的对象的方式，可以直接访问，不需要实例化该类的对象。

注意：

1. 单例类只能有一个实例。
2. 单例类必须自己创建自己的唯一实例。
3. 单例类必须给所有其他对象提供这一实例。

---

传统的UML类图

---

JavaScript 模拟实现

由于单例模式需要用到 java 的特性(private) , ES6没有(TypeScript)除外, 以下实现只是模拟出 JavaScript实现的单例模式。

class SingleObject {
    login() {
        console.log('login...')
    }
}

SingleObject.getInstance = (function() {
    let instance
    return function() {
        if(!instance) {
            instance = new SingleObject()
        }
        return instance
    }
})()

// 测试
let obj = SingleObject.getInstance()
obj.login() // login...
let obj2 = SingleObject.getInstance()
obj2.login() // login...
console.log('obj === obj2: ', obj === obj2) // true

---

单例模式的实例

• jQuery 中的 $实例
• vuex 中的 store

单例模式的使用场景

• 登录框
• 购物车

---

以下代码使用单例模式模拟只能显示一个的登录框

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.hide()
console.log('login1 === login2:', login1 === login2) //true