设计模式-单例模式的应用场景

lsekfe

单例模式在前端开发过程中非常常见，通俗来说就是某个类只能有一个实例，只能实例化一次，之后所有实例化的操作都是返回之前已经实例化的实例。
　　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多少次，展示的都是同一个，因为通过单例模式，使用的都是同一个实例。
　　缓存
　　比如在业务开发过程中，将需要通过接口请求的数据或者一系列操作得到的数据进行缓存，这个数据具备持久性、不变性，否则缓存下来之后会导致出现问题，这个时候就可以利用单例模式将数据进行缓存。