前端设计模式应用 | 青训营

设计模式是在软件开发领域中，用来解决常见问题和提供可复用解决方案的一种经验总结。它们帮助开发人员在设计和编码过程中遵循一些已经被认可为有效的方法。设计模式可以减少代码的重复性、提高代码的可维护性、可扩展性和可读性。

前端设计模式概念和背景解读

在前端开发中，设计模式可以帮助开发人员处理各种与用户界面、用户交互和数据管理相关的问题。这些模式可以帮助我们更好地组织和管理前端代码，从而提高开发效率和代码质量。

设计模式分类枚举

前端设计模式可以根据其用途和特点进行分类，以下是一些常见的前端设计模式分类：

1. 创建型模式（Creational Patterns）

   这些模式关注对象的创建过程，包括实例化和初始化。

   • 工厂模式（Factory Pattern）：

     工厂模式是一种创建对象的模式，它提供了一个通用的接口来创建不同类型的对象，而无需暴露其创建逻辑。这有助于解耦对象的创建和使用，使代码更具灵活性和可维护性。工厂模式包括：

     • 简单工厂模式（Simple Factory Pattern）
     • 工厂方法模式（Factory Method Pattern）
     • 抽象工厂模式（Abstract Factory Pattern）

   • 单例模式（Singleton Pattern）：

     单例模式确保一个类只有一个实例，并提供全局访问点以获取该实例。这对于控制资源、共享状态和确保只有一个对象实例非常有用，如全局配置、日志管理等。

   • 原型模式（Prototype Pattern）：

     原型模式通过复制已有对象来创建新对象，而不是从头开始构建。这可以提高对象创建的效率，特别是在创建成本较高或复杂的对象时。原型模式适用于创建对象的开销较大，但又需要频繁创建新实例的情况。

   • 构建者模式（Builder Pattern）：

     构建者模式专注于创建复杂对象，将对象的构建过程与其表示分离开来。它允许使用相同的构建过程来创建不同的表示，从而使构建过程更灵活和可扩展。这在创建具有多个组件、选项或配置的对象时非常有用。

2. 结构型模式（Structural Patterns）：

   这些模式关注对象之间的组合和关联，用于构建更大的结构。

   • 适配器模式（Adapter Pattern）:

     适配器模式用于将不同接口的对象转换成客户端期望的接口，从而使不兼容的接口能够协同工作。适配器充当一个中间层，将不同接口进行转换以满足客户端的需求。

   • 装饰者模式（Decorator Pattern）:

     装饰者模式允许在不改变现有对象结构的情况下，动态地添加功能或修改行为。通过将对象包装在装饰者中，可以在运行时添加或删除对象的功能。

   • 外观模式（Facade Pattern）:

     外观模式提供了一个简化的接口，用于访问复杂系统的一组接口。它隐藏了底层系统的复杂性，使客户端能够更轻松地与系统交互。

   • 桥接模式（Bridge Pattern）:

     桥接模式用于将抽象部分与实现部分分离，从而使它们可以独立地进行变化。这可以提高系统的灵活性，并减少抽象和实现之间的耦合。

   • 组合模式（Composite Pattern）:

     组合模式用于将对象组织成树状结构，使客户端能够像处理单个对象一样处理对象的组合。这有助于处理复杂的对象结构，同时保持一致的接口。

   • 享元模式（Flyweight Pattern）:

     享元模式用于共享具有相似特征的对象，从而减少内存和资源的使用。通过共享共同的状态，可以有效地支持大量细粒度的对象。

3. 行为型模式（Behavioral Patterns）：

   这些模式关注对象之间的交互和职责分配。

   • 策略模式（Strategy Pattern）:

     策略模式定义了一组算法，将其封装成独立的策略对象，并使它们可以互相替换。这允许客户端根据需要选择不同的策略来完成特定任务。

   • 观察者模式（Observer Pattern）:

     观察者模式定义了一种对象之间的依赖关系，当一个对象的状态发生变化时，其依赖的对象会自动收到通知并更新。这在实现发布-订阅模型和事件处理中非常有用。

   • 命令模式（Command Pattern）:

     命令模式将请求封装成对象，使得可以参数化客户端的请求，从而使命令的请求者和执行者解耦。这可以支持撤销、日志记录和队列等功能。

   • 迭代器模式（Iterator Pattern）:

     迭代器模式用于提供一种统一的方式来遍历不同类型的集合或聚合对象，而无需暴露其内部结构。这可以使客户端代码更简洁，并支持不同的遍历方式。

   • 职责链模式（Chain of Responsibility Pattern）:

     职责链模式将请求的发送者和接收者解耦，构建一个对象链，使每个对象都有机会处理请求或将其传递给下一个对象。这可以实现灵活的请求处理流程。

   • 中介者模式（Mediator Pattern）:

     中介者模式定义了一个中介对象，用于管理一组对象之间的交互。它可以减少对象之间的直接依赖，从而降低耦合度，同时提供了一种集中化的交互方式。

   • 备忘录模式（Memento Pattern）:

     备忘录模式用于捕获一个对象的内部状态，以便可以在以后将其恢复到先前的状态。这在需要实现撤销和历史记录功能时非常有用。

   • 状态模式（State Pattern）:

     状态模式允许对象在内部状态改变时改变其行为，从而使对象看起来好像修改了其类。这可以避免大量的条件语句，提高代码的可维护性。

   • 访问者模式（Visitor Pattern）:

     访问者模式用于在不修改对象结构的情况下，在一组对象上添加新的操作。这允许将操作从对象中分离出来，并在需要时进行添加或修改。

浏览器中主要的设计模式

在浏览器开发中，设计模式可以帮助开发人员优化页面性能、处理异步操作、管理DOM元素等问题。

• 模块模式（Module Pattern）
• 异步模式（Async Patterns，如回调、Promise、Async/Await）

JavaScript 三大设计模式

在JavaScript中，常见的设计模式包括：

• 单例模式（Singleton Pattern）
• 工厂模式（Factory Pattern）
• 观察者模式（Observer Pattern）

前端框架中的设计模式

前端框架通常会采用一些设计模式来帮助组织和管理应用程序的代码，提供更好的架构和开发体验。

• React：虚拟DOM、组件化、状态管理等
• Angular：依赖注入、模块化、双向数据绑定等
• Vue.js：响应式数据、组件化、指令系统等

Vue组件实现计数器：

<template>
<button @click="count+">count is: {{ count }}</button>
</template>

<script setup lang="ts">import { ref } from "vue".
const count = ref(0);
</script>