详解前端框架中的设计模式，并对比分析优缺点以及使用案例 | 豆包MarsCode AI刷题

不止步于宇坦
92 阅读5分钟

在现代的前端开发中，像 React、Vue 和 Angular 这样的框架特别流行。它们能够帮助我们更高效地构建复杂的页面结构，而这些框架之所以能成功，很大程度上是因为它们利用了一些经典的设计模式。这些模式是一些“代码套路”，通过这些套路，可以让我们的代码更加清晰、易维护。下面，我会用一种比较通俗易懂的方式来聊聊这些设计模式，看看它们的作用、优缺点，以及它们是怎么在这些框架中应用的。

1. 观察者模式

例子：Vue 的响应式数据

在 Vue 中，当你修改数据时，页面会自动更新。其实背后就是观察者模式在起作用：

  • 只要数据变化了，页面会收到通知，并自动更新内容。
const data = { count: 1 };
// Vue 响应式的简单模拟
const reactiveData = new Proxy(data, {
  set(target, key, value) {
    console.log(`${key} 被修改了，值变成了 ${value}`);
    target[key] = value;
    // 通知页面更新（假设这里有绑定逻辑）
  },
});

reactiveData.count = 2; // 输出：count 被修改了，值变成了 2

优点

  • 自动化更新：开发者不用手动操作 DOM，减少了很多麻烦。
  • 代码更简洁：只要修改数据，框架会帮你处理更新逻辑。

缺点

  • 性能问题：如果观察的数据太多，可能会有性能消耗（比如 Vue 的依赖收集需要占用资源）。
  • 调试难度：自动化更新很方便，但如果数据链很复杂，问题出错时就比较难查了。

2. 单例模式

单例模式是指整个应用中只有一个实例，所有地方都用它。这有点像学校的“学号系统”，每个人只能有一个唯一的学号。

例子：Vuex 和 Redux

Vuex（Vue 的状态管理工具）和 Redux（React 的状态管理工具）就是单例模式的典型例子：

  • Vuex 会管理整个应用的全局状态（比如用户登录信息、主题颜色等），确保所有地方都能用同一份数据。
  • 比如你登录后，页面的很多部分（头部显示用户名、侧边栏显示头像）都需要用到用户的信息。如果每个地方都各自管理一份用户信息，很容易出现数据不一致的问题。
// Vuex 示例
const store = {
  state: { username: "Alice" },
  setUsername(name) {
    this.state.username = name;
  },
};

// 全局共享
store.setUsername("Bob");
console.log(store.state.username); // 输出：Bob

优点

  • 全局共享：状态是统一的，不会出现数据不一致的问题。
  • 方便管理：所有的数据和逻辑都集中在一个地方。

缺点

  • 全局污染：如果滥用单例模式，全局状态会变得很复杂。
  • 难以维护：当全局状态太多时，代码会变得臃肿且难以维护。

3. 工厂模式

工厂模式是指通过一个函数来创建对象，而不是直接用 new 去创建。这有点像“汉堡店”：你告诉店员要什么汉堡，店员会根据你的需求制作并交给你。

例子：React 的虚拟 DOM

React 中的 React.createElement 就是工厂模式的例子。它用来创建虚拟 DOM。

const element = React.createElement(
  "div",
  { className: "container" },
  "Hello World"
);

优点

  • 隐藏细节：开发者只需要知道“我要什么”，不需要关心底层创建的逻辑。
  • 易扩展：如果将来需要改动“汉堡的做法”，只需要修改工厂逻辑，而不需要修改使用工厂的代码。

缺点

  • 如果工厂逻辑过于复杂，会增加代码的理解难度。

4. 模板方法模式

模板方法模式有点像写论文：学校会给出一套固定的模板（如标题、摘要、正文等），你只需要填充内容。前端框架中，它让开发者在预定义的流程中插入自己的逻辑。

例子：Vue 的生命周期

Vue 的生命周期就是模板方法模式的体现：

  • Vue 提供了固定的生命周期钩子（如 created、mounted），你可以在这些钩子中插入自己的逻辑，比如在 mounted 中请求数据。
export default {
  created() {
    console.log("组件被创建了！");
  },
  mounted() {
    console.log("组件挂载完成！");
  },
};

优点

  • 结构清晰：开发者只需要在规定的地方写逻辑，不需要关心框架底层的流程。
  • 方便扩展：可以根据不同的需求，在模板方法中插入不同的逻辑。

缺点

  • 学习成本：开发者需要理解框架的生命周期流程。

5. 装饰器模式

装饰器模式有点像为房子装修：房子的结构（核心功能）不变，但通过装修，可以让房子变得更漂亮，或者增加一些功能。

例子：Vue 的指令

Vue 的指令（如 v-model）就是装饰器模式的一个例子。它在 DOM 的基础上，增加了新的功能。

Vue.directive("focus", {
  inserted(el) {
    el.focus();
  },
});

优点

  • 灵活性高：装饰器可以为现有对象动态添加功能，而不需要修改原有代码。
  • 复用性强：常见的功能可以抽象成装饰器，方便多次使用。

缺点

  • 如果装饰器太多，代码会变得难以维护。

总结

不同的设计模式各有优缺点，它们的应用可以帮助我们解决开发中的常见问题：

设计模式优点缺点应用场景
观察者模式数据和视图解耦，自动更新性能问题，调试复杂Vue 的响应式系统、React 的状态更新
单例模式状态唯一，方便全局管理可能污染全局状态，难以释放资源Vuex、Redux 全局状态管理
工厂模式创建逻辑抽象，易扩展工厂逻辑复杂时，可能增加理解难度React 的虚拟 DOM
模板方法模式提供算法框架，便于扩展学习成本较高Vue 的生命周期
装饰器模式动态增强功能，不修改原有结构嵌套过多时难以维护Vue 指令、React 高阶组件

对于我们来说，理解这些模式不是为了记住名词，而是为了写出更简洁、易维护的代码。学会从框架的实现中发现这些模式，并尝试在自己的代码中运用，这才是关键。

avatar
文章
阅读
粉丝