设计模式-单例模式以及应用场景

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

单例模式在前端开发过程中非常常见，通俗来说就是某个类只能有一个实例，只能实例化一次，之后所有实例化的操作都是返回之前已经实例化的实例

UML：

实现单例

利用es6实现单例模式：

class Singleton {
    constructor() {
        if (!Singleton.instance) {
            Singleton.instance = this;
        }

        return Singleton.instance;
    }
}

const single = new Singleton()
const single2 = new Singleton()

console.log(single === single2); // true

可以看到single和single2是相等的，因为single2创建实例的时候返回的还是上一次的实例，无论之后调用多少次都是如此

利用闭包实现单例模式：

const singleton = (function () {
  function Person() {}
    let singleInstance;
    return function () {
        // 第一次实例化时
        if (!singleInstance) {
            singleInstance = new Person()
        }
    
        // 直接返回
        return singleInstance;
    };
})();

const single = singleton();
const single2 = singleton();

console.log(single === single2); // true

Person需要放在IIFE中，若是放到外面，此时用户是可以直接new Person实例化，并不能很好的控制，放在IIFE中可以防止外部直接实例化

若是此时需要再创建一个类的单例，这样实现的单例模式便需要重新CV一份代码，显然是不符合我们的预期的，因此需要将上述代码进行改造:

function Person() {}

/** 
 * constructor： 将需要单例的类 通过参数传递
*/
const singleton = function (constructor) {
    let singleInstance;
    return function () {
        // 第一次实例化时
        if (!singleInstance) {
            constructor.apply(this, arguments);
            Object.setPrototypeOf(this, constructor.prototype);
            singleInstance = this;
        }

        // 直接返回
        return singleInstance;
    };
};

const createPerson = singleton(Person)
const p = new createPerson();
const p2 = new createPerson();

console.log(p === p2); // true

需要注意Object.setPrototypeOf(this, constructor.prototype);,若是不讲this的prototype指向重新指向到constructor，那么通过此进行的实例对象是不能调用constructor.prototype上面的方法的，因为此时this的prototype指向是singleton函数中return的匿名函数

使用Object.setPrototypeOf改变prototype的指向是并不是一件理想的事情

警告: ** 由于现代 JavaScript 引擎优化属性访问所带来的特性的关系，更改对象的[[Prototype]]在各个*浏览器和 JavaScript 引擎上都是一个很慢的操作。其在更改继承的性能上的影响是微妙而又广泛的，这不仅仅限于obj.__proto__ = ...语句上的时间花费，而且可能会延伸到任何*代码，那些可以访问*任何***[[Prototype]]已被更改的对象的代码。如果你关心性能，你应该避免设置一个对象的[[Prototype]]。相反，你应该使用Object.create()来创建带有你想要的[[Prototype]]的新对象。

终极版本：

主要变动singleton函数，其他代码保持不变

const singleton = function (constructor) {
    let singleInstance;
    let singleConstructor = function () {
        // 第一次实例化时
        if (!singleInstance) {
            constructor.apply(this, arguments);
            singleInstance = this;
        }

        // 直接返回
        return singleInstance;
    };

    singleConstructor.prototype = Object.create(constructor.prototype);
    return singleConstructor;
};

应用场景

单例模式不仅各种库、框架中十分常见，在日常开发过程使用的非常普遍，还可以帮助我们更优雅的组织代码、编写代码

Vuex

在vuex中，就有单例的使用: 省略一些无关代码

if (!Vue && typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

function install (_Vue) {
  if (Vue && _Vue === Vue) {
    console.error('[vuex] already installed. Vue.use(Vuex) should be called only once.')
    return
  }
  Vue = _Vue
}

Message组件

在UI组件库中，Message组件是非常常见的，而且都是支持同时多个展示，那么本次利用单例，将其进行修改为同时只能展示一个，下面的案例以Vue为例

首先常见Message组件的内容

main.vue文件内容：

<template>
    <div v-show="visible">message组件</div>
</template>

<script type="text/babel">
export default {
    data() {
        return {
            visible: false
        };
    },
    methods: {
        close() {
            this.visible = false;
        },
        show() {
            this.visible = true;
        }
    }
};
</script>

代码内容非常简单，只有一个变量visible和两个函数，控制组件的展示和隐藏

接下来看如何控制其展示

main.js的内容:

import Vue from "vue";
import Main from "./main.vue";
let MessageConstructor = Vue.extend(Main);

class Message {
    /** 
     * 展示 message组件
     */
    show() {
        this.instance.show()
    }

    /** 
     * 关闭 message组件
     */
    close() {
        this.instance.close()
    }
	
    /** 
     * 单例
     */
    static getInstance() {
        if(!this.instance) {
            let instance = new MessageConstructor();
            this.instance = instance;
            instance.$mount();
            document.body.appendChild(instance.$el);
        }

        return this.instance
    }
}


Message.getInstance().show();
Message.getInstance().close();

无论调用show多少次，展示的都是同一个，因为通过单例模式，使用的都是同一个实例

缓存

比如在业务开发过程中，将需要通过接口请求的数据或者一系列操作得到的数据进行缓存，这个数据具备持久性、不变性，否则缓存下来之后会导致出现问题，这个时候就可以利用单例模式将数据进行缓存