单例模式

保证一个类仅有一个实例，并提供一个访问它的全局访问点，这样的模式就叫做单例模式。

例子：redux，vuex 等唯一状态数据库

全局只能有一个实例

为什么

一实现唯一性

二减少内存空间

如何实现：

静态函数版

class SingleDog {
    show() {
        console.log('我是一个单例对象');
    }
}

const s1 = SingleDog();

闭包版

介绍

系统中被唯一使用

一个类只有一个实例

说明

单例模式需要用到 java 的特性（private）

ES6 中没有（typescript 里有）

JS 使用单例模式

class SingleObject {
    login() {
        console.log('login...');
    }
}
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); // true

场景

JQuery 只有一个$

模拟登录框

vuex 和 redux 的 store

jQuery

if (window.jQuery != null) {
    return window.jQuery;
} else {
    // 初始化...
}

jQuery 主要展示了单例模式的思维

模拟登录框

class LoginForm {
    constructor() {
        this.state = 'hide';
    }
    show() {
        if (this.state === 'show') {
            alert('已经显示');
            return;
        }
        this.state = 'show';
        console.log('登录框已显示');
    }
    hide() {
        if (this.state === 'hide') {
            alert('已经隐藏');
            return;
        }
        this.state = 'hide';
        console.log('登录框已隐藏');
    }
}
LoginForm.getInstance = (function () {
    let instance;
    return function () {
        if (!instance) {
            instance = new LoginForm();
        }
        return instance;
    };
})();

vuex 和 redux 的 store

设计原则验证

符合单一职责原则，只实例化唯一的对象

没有具体开发封闭原则，但是绝对不违反开发封装原则

总结

使用 TypeScript 实现单例模式

有个点不太明白，既然登录框是

为什么要弄两个登录框，一个不久够了

让他显示和隐藏

参考资料

• 深入设计模式