JavaScript 设计模式-单例模式

前言

在你的第一印象中，设计模式应该是什么呢

在 JavaScript 发展的历程中，前行者们从实践中总结出了不少特定问题的解决方法。简单来讲，设计模式就是在某种场合下对特定问题的简洁而又优雅的解决方案

在以后的一段时间，我将记录 JavaScript 中各类常见的设计模式。或许你对此已经得心应手，或许平时已在使用，可是对其概念并非特别熟悉，又或许只是对此有一些模糊的概念。那么，相信这个系列必定会带给你些许收获

在了解这些常见的模式以前，默认你已经至少掌握

• this
• 闭包
• 高阶函数
• 原型和原型链

了解它们，会让你更加清晰的认识一个模式。固然，或许我以前所记录的有关这方面的东西可以给你些许帮助 传送门

若是文章中有出现纰漏、错误之处，还请看到的小伙伴多多指教，先行谢过

下面，就让咱们从它开始吧 -- 单例模式

概念

顾名思义，只有一个实例

定义：保证一个类仅有一个实例，并提供一个访问它的全局访问点

看到这样的定义，你的脑海中是否会冒出 全局变量 的概念呢。不能否认，全局变量是符合单例模式的概念的。可是，咱们一般不会也不该该将它做为一个单例来使用，缘由有如下两点：

• 全局命名污染
• 不易维护，容易被重写覆盖

在 ES6 以前，咱们一般会使用一个构造函数来模拟一个类，如今咱们也能够直接使用 class 关键字来建立一个类，虽然其本质也是原型

想要保证一个类仅有一个实例，咱们须要提供一个变量来标志当前是否已经为一个类建立过实例。因此，单例模式的核心就是：确保只有一个实例，并提供全局访问

围绕这个核心，咱们也就基本清楚了单例模式的实现方式

实现

基础版

根据单例模式的定义，咱们能够用如下方式简单实现

var Singleton = function(name){
    this.name = name
}

Singleton.instance = null // 初始化一个变量

Singleton.getInstance = function(name) {
// 判断这个变量是否已经被赋值，若是没有就使之为构造函数的实例化对象
// 若是已经被赋值了就直接返回
    if(!this.instance) {
        this.instance = new Singleton(name)
    }
    return this.instance
}

var a = Singleton.getInstance('Tadpole')
var b = Singleton.getInstance('Amy')

a === b // true

以上代码，清晰的反映出了单例模式的定义。经过一个中间变量的方式，只初始化一个实例，因此最终 a 和 b 是彻底相等的

咱们也能够用 ES6 的 class 关键字来实现

class Singleton {
    constructor(name){
        this.name = name
        this.instance = null
    }
    // 提供一个接口对类进行实例化
    static getInstance(name) {
        if(!this.instance) {
            this.instance = new Singleton(name)
        }
        return this.instance
    }
}

不难发现，ES6 的实现方式和咱们经过构造函数的方式实现基本是一致的

存在问题：

• 不够 透明，咱们须要约束类实例化的调用方式
• 耦合度太高，功能业务代码耦合在一块儿不利于后期维护

构造函数

让咱们对上面的方式作一个简单的修改

// 将变量直接挂在构造函数上面，最终将其返回
function Singleton(name) {
    if(typeof Singleton.instance === 'object') {
        return Singleton.instance
    }
    // 正常建立实例
    this.name = name
    return Singleton.instance = this
}

var a = new Singleton('Tadpole')
var b = new Singleton('Amy')

解决了基础版类不够 透明 的问题，可使用 new 关键字来初始化实例，但同时也存在着新的问题

• 判断 Single.instance 类型来返回，可能得不到预期结果
• 耦合度太高

这种方式也能够经过 ES6 方式来实现

// 将 constructor 改写为单例模式的构造器
class Singleton {
    constructor(name) {
        this.name = name
        if(!Singleton.instance) {
            Singleton.instance = this
        }
        return Singleton.instance
    }
}

闭包

经过单例模式的定义，想要保证只有一个实例而且能够提供全局访问。那么，闭包确定也是能够实现这样的需求

var Singleton = (function () {
    var SingleClass = function () {}; 
    var instance; 
    return function () {
        if (!instance) { 
            instance = new SingleClass() // 若是不存在 则new一个
        }
        return instance;
    }
})()

经过闭包的特性，保存一个变量并最终将其返回，提供全局访问

一样的，以上的代码仍是没有解决耦合度的问题

让咱们仔细观察这一段代码，若是咱们将其中构造函数的部分提取到外部，是否就实现了功能的分离呢

代理实现

修改一下上面的代码

function Singleton(name) {
    this.name = name
}

var proxySingle = (function(){
    var instance
    return function(name) {
        if(!instance) {
            instance = new Singleton(name)
        }
        return instance
    }
})()

将建立函数的步骤从函数中提取出来，把负责管理单例的逻辑移到了代理类 proxySingle 中。这样作的目的就是将 Singleton 这个类变成一个普通的类，咱们就能够在其中单独编写一些业务逻辑，达到了逻辑分离的效果

咱们如今已经达到了逻辑分离的效果，而且也不 透明 了。可是，这个负责代理的类是否已经彻底符合咱们的要求呢，答案是否认的。设想一下，若是咱们的构造函数有多个参数，咱们是否是也应该在代理类中体现出来呢

那么，有没有更通用一些的实现方式呢

通用惰性单例

在前面的几个回合，咱们已经基本完成了单例模式的建立。如今，咱们须要寻求一种更通用的方式解决以前留下来的问题

试想一下，若是咱们将函数做为一个参数呢

// 将函数做为一个参数传递
var Singleton = function(fn) {
    var instance
    return function() {
        // 经过apply的方式收集参数并执行传入的参数将结果返回
        return instance || (instance = fn.apply(this, arguments))
    }
}

这种方式最大的优势就是至关于缓存了咱们想要的结果，而且在咱们须要的时候才去调用它，符合封装的单一职责

应用

前面有说过，全部的模式都是从实践中总结而来，下面就让咱们来看看它在实际开发中都有哪些应用吧

经过单例模式的定义咱们不难想出它在实际开发中的用途，好比：全局遮罩层

一个全局的遮罩层咱们不可能每一次调用的时候都去建立它，最好的方式就是让它只建立一次，以后用一个变量将它保存起来，再次调用的时候直接返回结果便可

单例模式就很符合咱们这样的需求

// 模拟一个遮罩层
var createDiv = function () {
    var div = document.createElement('div')
    div.style.width = '100vw'
    div.style.height = '100vh'
    div.style.backgroundColor = 'red'
    document.body.appendChild(div)
    return div
}

// 建立出这个元素
var createSingleLayer = Singleton(createDiv)

document.getElementById('btn').onclick = function () {
    // 只有在调用的时候才展现
    var divLayer = createSingleLayer()
}

固然，在实际应用中仍是有不少适用场景的，好比登陆框，还有咱们可能会使用到的 Vux 之类的状态管理工具，它们实际上都是契合单例模式的

后记

单例模式是一种简单而又实用的模式，经过建立对象和管理单例的两个方法，咱们就能够创造出不少实用且优雅的应用。固然，它也有自身的缺点，好比只有一个实例~

合理使用才能发挥出它的最大威力

最后，推荐一波前端学习历程，感兴趣的小伙伴能够 点击这里 ，也能够扫描下方二维码关注个人微信公众号，查看往期更多内容，欢迎 star 关注