前端常见的设计模式有哪些

1.单例模式：确保一个类只有一个实例，并提供一个全局访问点。它通常用于管理共享资源或全局状态

单例模式的主要目的是限制一个类的实例化次数，以及确保在整个应用程序中只能有一个相同的对象实例被使用。这在某些情况下是非常有用的，例如需要一个全局共享的对象，或者需要控制资源的访问次数。

实现单例模式的关键是将类的构造函数设置为私有，防止外部通过调用构造函数来创建实例。然后通过一个静态方法来获取实例，并在第一次调用该方法时创建实例。随后的调用都会返回之前创建的实例。   

通俗理解就是一个类的对象只能拥有一个实例，没有则创建该对象的实例化对象，有则不会重新创建而是返回该实例化后的对象

2.观察者模式：定义了对象之间的一对多依赖关系，当一个对象状态变化时，它的所有依赖对象都会收到通知并自动更新。广播通信模式（Pub/Sub）是观察者模式的一种实现。

在观察者模式中，存在两种关键角色：

1. 主题（Subject）：也称为可观察对象（Observable），主题维护一组观察者，并提供方法来添加、移除和通知观察者。主题的状态变化会导致观察者的更新。

2. 观察者（Observer）：观察者订阅主题，以接收主题的通知。当主题的状态发生变化时，观察者会被通知，并根据需要执行相应的操作。

 观察者模式的实现通常基于推（push）或拉（pull）两种方式：

1. 推模型中，主题在状态变化时主动向观察者推送相应的信息。观察者不需要主动请求数据，只需接收并处理即可。
2. 拉模型中，观察者在接收到通知后，主动从主题中拉取所需的数据。观察者可以根据自身需要灵活地请求所需的数据。

 观察者模式通俗理解就是观察者和被观察的对象，当被观察的对象发生了改变，观察者们就会更新，而被观察的对象有2种方式去实现观察者模式分别是推和拉，当被观察的对象主动向观察者推送消息时，观察者只需接收即可，第二种则是观察者订阅被观察的对象，被观察的对象发生改变会通知观察者然后主动拉取所需数据，并开始执行相应操作

3.工厂模式：是一种创建型设计模式，用于通过工厂方法创建对象，而不是直接调用构造函数来创建对象。

工厂模式将对象的实例化过程封装在一个工厂类中，从而隐藏了对象的创建细节，提供了一种灵活的对象创建方式

在工厂模式中，存在以下几个关键角色：

1. 抽象产品（Abstract Product）：定义了产品的抽象接口，它是具体产品类的共同父类或接口。

2. 具体产品（Concrete Product）：实现抽象产品接口的具体类，由工厂方法来实例化创建。

3. 抽象工厂（Abstract Factory）：定义了创建产品的抽象接口，它包含了创建产品的方法。

4. 具体工厂（Concrete Factory）：实现了抽象工厂接口的具体类，负责实例化具体产品对象。

工厂模式的主要优点包括：

• 将对象的创建和使用逻辑分离，客户端代码只需通过工厂方法来创建对象，无需关注具体的实例化过程。
• 符合面向接口编程的原则，客户端代码只需关心抽象产品和抽象工厂，而无需关心具体产品和具体工厂。
• 可以通过改变具体工厂来创建不同的产品对象，增强了代码的灵活性和扩展性。

通俗理解就是创建几个父类，然后继承父类的方法，再互相通过父类创建的对象调用父类的方法实例化实现了对象的创建和使用的分离，同时可以方便地扩展和切换不同的具体产品。

4.装饰器模式：动态地给一个对象添加额外的功能，装饰器模式通过将对象包装在一个装饰器中实现。它对于在不修改现有对象的情况下扩展功能很有用

就如mobx就使用了很多装饰器设计方法

1. @observable: 用于将属性或对象转化为可观察的状态。当被观察的数据发生变化时，其依赖项会被自动更新。
2. @action: 用于标记一个方法为动作，对可观察的状态进行修改。只有被@action修饰的方法才能对可观察状态进行修改。
3. @computed: 用于标记一个计算属性，根据其他可观察的状态进行计算并返回一个值。计算属性会对其依赖进行跟踪，并在依赖发生变化时重新计算。
4. @autorun: 用于创建一个响应式的函数，当可观察的状态发生变化时会自动运行。它可被用于执行副作用，例如数据更新后触发一些操作。

 5.策略模式：定义了不同算法族的抽象，并使它们可以相互替换。策略模式使得算法可以独立于使用它的客户端而变化。

6.MVC（Model-View-Controller）模式：MVC 是一种架构模式，用于将应用程序分割成三个组成部分：模型（Model），视图（View）和控制器（Controller）。它有助于组织代码、分离关注点，并支持应用程序的可维护性。

7.MVVM（Model-View-ViewModel）模式：MVVM 是一种基于 MVC 的模式，它将视图（View）和模型（Model）之间引入一个视图模型（ViewModel）。它在前端开发中广泛应用于数据双向绑定和组件化开发。