JavaScript设计模式之单例模式

什么是单例模式？

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

上面是单例模式的一个特点，看起来比较抽象，我们可以结合日常开发中的实例来理解，比如：

• 登录框
• 购物车

不难理解，一个大型的项目或者商城系统，不管系统多大，都只能有一个登录框，一个购物车，如果不使用单例模式，让其有多个登录框和购物车，那么将导致系统的bug。

单例模式的UML类图和代码

同样的，在学习或者研究一种设计模式的时候，我们首先要画出其UML类图，网上的关于单例模式的UML类图也是有很多，但大多数也是基于Java的，相对于java,JS作为弱类型语言，有一些概念是没有的或者没法实现的。

可以看到哈，上面的UML类图中，强依赖于“-”也就是‘private’,而JS中是没有这样的关键字的，这里我们要是强理解Java代码可能会比较费劲，但是我们可以通过JS的闭包来模拟出这一操作。

class SingleObject {
    login() {
        console.log('login...')
    }
}
// 为SingleObject赋一个静态的方法，这样在实例化的时候，不能让所有实例都访问到。模拟一个“private”私有属性

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)

如果我们的代码是单例模式的，那么每次执行出来的结果，得到的实例应该是一模一样的，在JS中应该使用“===”来验证，反之，则不行。上面代码的运行结果为

可见，我们通过JS，模拟除了UML类图中的单例模式。因为JS语言的弱类型，我们无法像java一样去私有化一个构造函数，所以，这里如果你使用new SingleObject来做实例化，也是可以，只不过就不是单例模式了，我么你这里的代码，只是通过JS来做一个模拟，让大家知道单例模式是什么，在前端开发中的应用场景有哪些即可。太细节的东西，大家就不要纠结了。

单例模式在前端开发中的应用场景

1. jQuery只有一个$

我们知道，不管你在网页中引入多少遍Jquery，最终都只有一个$,这就是一个单例模式，同样，我们在日常的开发或者学习中，也可以去使用单例模式，来避免一些重复的操作。

2. 登录框
3. 系统中的购物车
4. vuex和redux中的store

设计原则验证

• 符合单一职责原则，只实例化唯一的对象
• 没法具体开放封闭原则，但是也不违反开放封闭原则

写在后面

受限于JS的语言特点，我们无法完全准确的写出单例模式，只能做一个简单的模拟，实际开发中，我们记住这种模式即可

（本节完...）