【场景方案】带你浅浅了解下前端所需要的一些常用设计模式，提供例子说明

前言

目前没精力深入了解，所以先记录一些比较常用的设计模式，且不会很深入。

日后有空了，待我深入了解后再更新文章。

部分知识来源双越老师的课程

---

工厂模式

大白话来说就是，定义了一个函数，这个函数相当于一个工厂，你需要什么样的产品，就输入什么样的参数，最终它给你生产出来。

例如：

• React createElement函数
• JQ的$()
• 你自己封装的构造函数

拿构造函数来说，例如你封装了很多可以归为一个大类的class：

class IntNum {...}
class AntNum {...}
class TelNum {...}
// ... 等等

咱们可以把这堆关于不同类型数据处理的类，归纳成一个构造函数：

function GetTypeNumClass(type) {
	// ... 根据不同类型，return一个new class
}

这就是一个最简单的工厂模式写法

---

单例模式

主要特点是只能生成全局的唯一实例。

例如：

• vuex的store

写个例子（修饰符只在TS中有）：

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 a = SingleTon.getInstance()
a.fn1()
a.fn2()

const b = SingleTon.getInstance()
console.log(a === b); // 实例化出来的对象是同一个

• public：表示公有，在父类定义函数中和外，以及子类都能直接以任何形式访问。
• private：表示私有，只有在父类定义函数中访问，子类函数内部无法访问（但可通过外面调用继承的父类方法去访问）。

原文链接：https://blog.csdn.net/pagnzong/article/details/117002780

因为js是单线程语言，所以创建单例模式很简单方便。其他语言像java是多线程的，不考虑锁死线程会多个线程同时创建单例。

---

代理模式

就是你想访问一个对象是无法直接访问的，只能通过一个代理层去访问。

例如：

• proxy，通过get和set的触发进行访问

---

观察者模式

例如：

• 平时加的监听器addEventListener

---

发布订阅模式

例如：

• vue的bus机制

和观察者模式的区别：

• 观察者模式，我认为触发主体和接收者是强绑定的，例如按钮和点击事件，二者关联性强。
• 发布订阅模式，我认为触发的主体和接收者无需强绑定，接收者只和事件总线强绑定。

---

装饰器模式

相当于给原来的一些东西新附上一些功能

例如：

• class和方法等的修饰符
• ts的decorator语法

---

尾巴

记录的很简单，只是现在没空详细去做了解。未来一定补充！！！

多了解一些设计模式，你才能设计出高级的代码。中级前端和高级前端之间相差的其中一个维度就是代码设计。