前端中的设计模式 | 豆包MarsCode AI刷题

Singleeeee
98 阅读5分钟

前端框架中的设计模式是开发过程中用来解决常见问题和提升代码质量的通用方法。在现代前端开发中，设计模式不仅帮助实现高效的功能和优雅的代码结构，还能让我们在团队协作时维持一致性。常见的前端设计模式包括观察者模式（发布-订阅模式）、单例模式、工厂模式、策略模式等，这里主要讲观察者模式以及单例模式。

1. 设计模式概述

观察者模式（发布-订阅模式）

  • 定义：观察者模式是一种行为设计模式，其中一个对象（主题）维护一系列依赖对象（观察者）。当主题状态发生变化时，它会通知所有依赖对象，使得它们能够自动更新。

  • 优点：

    • 解耦：主题和观察者之间没有直接的依赖关系，主题只负责维护观察者的注册和通知，观察者无需知道主题的具体实现。
    • 灵活性：支持多个观察者，可以实现多对多的关系，方便扩展。

  • 缺点：

    • 性能问题：当观察者数量过多时，通知的性能可能会下降。
    • 难以追踪：系统的通知机制可能变得复杂，尤其是在观察者链条较长时。

单例模式

  • 定义：单例模式是一种创建型设计模式，确保某个类只有一个实例，并提供全局访问该实例的方式。

  • 优点：

    • 控制资源：通过保证单一实例，避免了资源浪费，适用于需要共享资源的场景，如配置管理、数据库连接等。
    • 延迟初始化：实例仅在需要时创建，提高性能。

  • 缺点：

    • 隐藏依赖：由于单例实例的全局性，可能导致代码中的隐性依赖，使得系统的模块化和测试变得困难。
    • 可扩展性差：如果需要扩展功能，往往很难做到。

2. Vue 响应式原理的发布-订阅模式

Vue 的响应式原理通过使用发布-订阅模式来实现数据与视图的双向绑定。当 Vue 中的数据发生变化时，所有依赖该数据的视图会自动更新。

原理：

  1. 数据劫持：Vue 使用 Object.defineProperty 或 Proxy（Vue 3）来劫持对象的 getter 和 setter，在访问对象属性时，Vue 会通过 getter 将当前依赖（如视图组件）注册到这个属性的订阅者列表中。
  2. 依赖收集：每个组件的渲染函数都被当作观察者（订阅者）添加到数据属性的依赖列表中。
  3. 触发更新：当数据改变时，触发 setter，从而通知所有依赖该数据的订阅者更新视图。

这里被劫持的对象就作为发布者，当发布者的数据改变时，就会通知各个订阅者更新，例如更新html模版中的模板字符串、更新html标签的属性等等，这些会去通知渲染函数拿到最新的数据然后重新渲染

image.png

使用案例：

  • 在 Vue 中，当数据改变时，视图会自动更新。例如：

    复制代码
data() {
  return {
    message: 'Hello Vue!'
  };
}

    当 message 被修改时，Vue 会自动通知所有依赖该数据的视图重新渲染。

优缺点：

  • 优点：

    • 高效：能够自动更新依赖的数据，减少了手动操作 DOM 的复杂性。
    • 解耦：视图与数据的管理解耦，数据变化时自动触发更新。

  • 缺点：

    • 性能问题：大量依赖可能导致性能问题，尤其是在大量组件共享同一数据时。
    • 难以追踪：在复杂的数据流中，可能会导致依赖链条变得复杂，难以追踪更新来源。

3. 状态管理工具的单例模式

在前端框架中，状态管理工具（如 Vuex、Redux）常常采用单例模式来确保整个应用程序中只有一个全局的状态管理实例。这样做的目的是确保多个组件可以共享同一状态并且在需要时可以同步更新。

Vuex 单例模式的实现：

Vuex 是 Vue 的官方状态管理工具，它通过单例模式来管理应用的状态。Vuex 创建一个全局的单例实例，这个实例包含了全局状态（state）、mutations、actions 和 getters，所有组件都可以通过这个实例来共享和管理状态。

import Vuex from 'vuex';

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

export default store;

使用案例：

  • 在 Vue 组件中，多个组件可以通过 store 访问和修改全局状态。例如：

    
computed: {
  count() {
    return this.$store.state.count;
  }
},
methods: {
  increment() {
    this.$store.commit('increment');
  }
}

优缺点：

  • 优点：

    • 单一数据源：通过全局单例管理状态，避免了状态管理的混乱和重复。
    • 中央化管理：可以集中管理应用的所有状态，避免了多个组件之间的状态不同步问题。

  • 缺点：

    • 难以扩展：随着应用的复杂度增加，Vuex 中的状态管理可能变得难以维护，特别是在大型应用中。
    • 与组件耦合：状态管理是全局的，可能会导致组件之间的强耦合，限制了模块化开发的灵活性。

总结：

设计模式在前端框架中也有着广泛的应用。

  • 发布-订阅模式 Vue 的响应式系统使用了发布-订阅模式， 发布-订阅模式的优势在于解耦和自动更新，但也存在性能和调试方面的挑战。
  • 单例模式 Vuex 则通过单例模式来集中管理应用的状态。它的优势在于资源共享和管理的集中化，但可能会导致隐式依赖和扩展性差的问题。
avatar
文章
阅读
粉丝