前端常用的设计模式和使用场景

本文探讨了前端开发中常见的设计模式,包括开放封闭原则、工厂模式、单例模式、代理模式、观察者模式、发布订阅模式和装饰器模式。讲解了它们的应用场景,如jQuery的实例创建、Vuex的store、Vue3的响应式实现,以及在事件绑定和面向切面编程中的应用。同时,区分了观察者模式和发布订阅模式的主要区别。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

设计原则

最重要的思想:开放封闭原则

对扩展开放

对修改封闭

工厂模式

用一个工厂函数,创建一个实例,封装创建的过程。

class Foo { ... }

function factory(): Foo {
    // 封装创建过程,这其中可能有很多业务逻辑

    return new Foo(...arguments)
}

应用场景

- jQuery `$('div')` 创建一个 jQuery 实例

- React `createElement('div', {}, children)` 创建一个 vnode

单例模式

全局唯一的实例(无法生成第二个)

class SingleTon {
    private static instance: SingleTon | null = null
    private constructor() {}
    public static getInstance(): SingleTon {
        if (this.instance === null) {
            this.instance = new SingleTon()
        }
        return this.instance
    }
    fn1() {}
    fn2() {}
}

// const s1 = new SingleTon() // Error: constructor of 'singleton
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值