JavaScript单例模式与开发实践(二)

前言

作为一个前端切图仔，少有和各类设计模式打交道。但这不影响我们学习设计模式的思维，来提升我们的代码水平。

本章通过讲解单例模式，希望能够让你对设计模式更一步的学习。

本章学习内容👇

• 完成一个透明的单例模式
• 用代理的方式实现单例模式

透明的单例模式

何为透明的单例模式？

即单例类能够不依赖于类以外的（例如：上文讲到的全局变量）实现，并像一个普通的类一样使用。

不能用全局变量了，那我们用什么呢？

我们可以通过局部变量，闭包的形式来使得SingleCase类具有一个保存实例的地址👇

let SingleCase = (function(){
    let obj = null
    let SingleCase = function (name){
        if (obj){
            obj.name = name
            return obj
        }else{
            this.name = name
            obj = this
        }
    }
    return SingleCase
​
})()
let a = new SingleCase(1)
console.log(a)
let b = new SingleCase(2)
console.log(a)
console.log(b)
console.log(a == b)

控制台输出👇

SingleCase { name: 1 }
SingleCase { name: 2 }
SingleCase { name: 2 }
true

我们通过使用自执行的匿名函数和闭包，让这个匿名函数返回新的SingleCase方法，达到了需求，但显然代码不够美观。

在SingleCase的构造函数中👇：

let SingleCase = function (name){
        if (obj){
            obj.name = name
            return obj
        }else{
            this.name = name
            obj = this
        }
    }

做了俩件事情

1. 保证只有一个实例对象
2. 创建/修改实例对象

这不符合单一职责原则：指一个类或者模块应该有且只有一个改变的原因。

假设某一天我们要修改这个类，让他衍生出俩个不同的单例类或者产生更多的实例时，这样的代码都不易修改。于是我们改写SingleCase的构造函数，去除掉控制创建唯一对象的那一段。

代理实现单例模式

我们通过代理的方式将控制创建唯一对象的功能交给代理对象👇

let SingleCase = function (name){
        this.name = name
}
let ProxySingleCase = (function(){
    let obj = null
    return function (name){
        if (!obj){
            obj = new SingleCase(name)
        }
        return obj
    }
​
})()
let a = new ProxySingleCase(1)
let b = new ProxySingleCase(2)
console.log(a == b)

控制台输出👇

true

我们通过使用代理类ProxySingleCase，将控制唯一实例权能转移出去，使得SingleCase成为了一个普通的类，并且也实现了单例模式。

尾声

单例模式的使用非常广泛，希望朋友们在日常开发中也能借鉴于这类思想