前端设计模式-单例模式

前言

概念: 确保一个类只有一个实例,并提供一个全局访问点来访问该实例。

使用场景:如vue的状态管理工具vuex

好处:符合路径唯一型和错误提示型两种开发规范,减少开发错误

实现方式:

ts版本

我们通过private关键字使这个类不能在外部new,否则报错。我们定义了一个方法获取这个实例,通过判断这个实例的存在来保证唯一性

typescript 复制代码
class Singleton {
    private static instance: Singleton;
    private constructor() { }
    // 通过静态方法获取实例
    public static getInstance() {
        if (!this.instance) {
            this.instance = new Singleton();
        }
        return this.instance;
    }
    public someBusinessLogic() {
        // ...
    }
}

// 直接new会报错
new Singleton(); // error:Constructor of class 'Singleton' is private and only accessible within the class declaration

// 通过定义的getInstance方法
console.log(Singleton.getInstance() === Singleton.getInstance()) // true,说明只创建了一个实例

js版本

版本1

好处:使用模块化避免内部直接new和通过静态方法new造成的不同实例产生

缺陷:存在通过原型的contructor函数重复new的隐患

javascript 复制代码
// single.js
class Singleton {
    constructor() {}
    static _instance;
    static getInstance() {
        if (!this._instance) {
            this._instance = new Singleton();
        }
        return this._instance;
    }
}
export default Singleton.getInstance();
​
// test.js
import stance from './single.js';
const a = new stance.constructor();
const b = new stance.constructor();
console.log(a === b); // false

我们通过模块化的方式直接导出类的getInstance方法,这里可以隐藏了这个类,别处使用的唯一实例,但是别人可能通过constructor(指向的就是这个类)取执行new,那么就绕过了我们写的判断

版本2(使用proxy完美保证单例模式)

javascript 复制代码
class Singleton {
    constructor() {}
}

// 封装一个函数,传入一个类,返回一个新的代理单例类
function toProxySingleton(className) {
    let instance;
    const proxyClass = new Proxy(className, {
        // 如果通过new调用,就会触发construct方法
        // 第一个参数是目标类,第二个参数是类里面的contructor的参数
        construct(target, argumentsList) {
            if (!instance) {
                console.log('new');
                instance = new className(...argumentsList);
                // 也可以通过Reflect.construct来创建实例
                // instance = Reflect.construct(target, argumentsList);
            } else {
                console.warn('instance already exists');
            }
            return instance;
        }
    });
    className.prototype.constructor = proxyClass; // 修复constructor指向
    return proxyClass;
}

const ProxySingle = toProxySingleton(Singleton);
console.log(new proxySingle() === new proxySingle()); // true,说明只创建了一个实例
console.log(new proxySingle() === new Singleton.constructor()) // true 使用contructor也不能创建第二个实例了
export default ProxySingle;

这时候我们在外部使用只需要引入这一个类去new即可,始终保证了一个类的实例的单一性

提醒:上述ts使用private实现的单例模式只能给我们语法上的提示,在编译为js的时候,js文件是没有报错效果的,仍然可以创造多个不同实例.

相关推荐
GodKeyNet1 小时前
设计模式-责任链模式
java·设计模式·责任链模式
摘星编程6 小时前
深入理解责任链模式:从HTTP中间件到异常处理的实战应用
http·设计模式·中间件·责任链模式·实战应用
鼠鼠我呀28 小时前
【设计模式04】单例模式
单例模式·设计模式
缘来是庄16 小时前
设计模式之访问者模式
java·设计模式·访问者模式
hqxstudying19 小时前
Java创建型模式---单例模式
java·数据结构·设计模式·代码规范
花好月圆春祺夏安20 小时前
基于odoo17的设计模式详解---装饰模式
数据库·python·设计模式
fie888920 小时前
浅谈几种js设计模式
开发语言·javascript·设计模式
哆啦A梦的口袋呀20 小时前
《深入设计模式》模式结构汇总
设计模式
花好月圆春祺夏安20 小时前
基于odoo17的设计模式详解---单例模式
单例模式·设计模式
在未来等你1 天前
设计模式精讲 Day 22:模板方法模式(Template Method Pattern)
设计模式·模板方法模式·软件架构·java开发·面向对象设计·设计模式实战·java应用开发