前端框架（如React、Vue、Angular等）在设计中广泛使用了一些经典的设计模式，这些模式不仅提高了代码的可维护性、复用性和扩展性，还帮助开发者更清晰地构建复杂的前端应用。今天来分析一下几个常用设计模式，并对比它们的优缺点以及实际使用案例。
1. MVC 模式（Model-View-Controller）
MVC 将应用分为三部分：
- Model（模型）： 管理数据和业务逻辑。
- View（视图）： 负责数据的展示。
- Controller（控制器）： 处理用户输入并更新模型和视图。
例子：
比如 Angular 就使用了类似 MVC 的架构，尤其在早期版本（1.x）中。
有一说一，现在Angular见到的不多了（我个人来讲）上次见到是在很久之前一个b站up自己做的网站用的Angular
- Model： Angular 的
Services用于管理数据逻辑。 - View： HTML 模板。
- Controller： Angular 的
Controller处理用户输入并与Model和View交互。
优点：
- 代码职责分离，易于维护和扩展。
- 支持并发开发，前后端可以独立工作。
缺点：
- 对小型项目过于复杂。
- 模块间依赖较高，可能导致耦合。
总评
现在MVC模式见到的不多，尤其是新项目，因为比较复杂，并且Controller不太灵活，现在主流的都用前后端分离的架构了
2. MVVM （Model-View-ViewModel）
MVVM 是 MVC 的演化版本，用于更好地处理 UI 和业务逻辑的分离：
- Model： 数据和业务逻辑。
- View： 用户界面（UI）。
- ViewModel： 连接 Model 和 View，通过双向数据绑定进行同步。
Vue 是典型的 MVVM 框架（这里说的Vue2）：
- Model： Vue 的响应式数据对象（如
data）。 - View： Vue 的模板文件（如
.vue）。 - ViewModel： Vue 实例对象负责数据的双向绑定。
优点：
- 数据和视图同步更新，开发效率高。
- 减少直接操作 DOM，提高性能和开发体验。
缺点：
- 双向数据绑定可能导致调试困难（数据流复杂）。
- 对性能优化要求高，尤其在大型应用中。
总评
MVVM 是目前前端开发的核心模式了，尤其在 Vue 和 Angular 中得到了广泛应用。Vue 的响应式系统和双向绑定就是经典的 MVVM 设计模式
3. Flux/Redux（单向数据流模式）
单向数据流强调数据只能沿一个方向流动，以保证状态的可预测性和简洁性：
- Action： 描述需要执行的操作。
- Dispatcher： 中央管理器，分发 Action。
- Store： 保存应用的状态。
- View： 根据 Store 中的数据渲染 UI。
例子：
React 中常用 Redux 实现单向数据流：
- Store： 全局状态存储。
- Action + Reducer： 定义状态变更逻辑。
优点：
- 状态管理清晰，调试工具（如 Redux DevTools）强大。
- 易于测试，数据流简单且可预测。
缺点：
- 初学者学习曲线较陡。
- 对小型项目显得笨重。
4. 组件化模式（Component-based Design）
将应用程序拆分为多个独立、可复用的组件，每个组件包含自己的逻辑和样式。
React、Vue 和 Angular 都采用了组件化设计。
- 在 React 中，组件是基于函数或类的封装单位
- 在 Vue 中，组件通过
template、script和style定义，也可以说是.vue定义的
优点：
- 高内聚、低耦合，代码复用性高。
- 易于调试和测试。
缺点：
- 组件过多可能导致复杂的依赖关系管理。
- 需要良好的命名规范和目录结构。
5. 观察者模式（Observer Pattern）
定义：
一种行为型模式，定义了对象间的一种一对多的依赖关系，当一个对象状态发生改变时，其所有依赖者都会收到通知并自动更新。
例子：
Vue 的响应式系统基于观察者模式：
- 订阅者： Vue 的模板或计算属性。
- 观察者： 数据对象。
优点：
- 视图和数据同步更新。
- 适用于动态和实时更新的应用（如聊天或股票数据）。
缺点：
- 依赖链过长时，调试困难。
- 可能引发性能问题（频繁触发观察回调）。
各模式对比总结
| 模式 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| MVC | 清晰的职责分离，适合团队协作 | 复杂项目容易产生耦合 | 中型项目或后端驱动的前端应用 |
| MVVM | 提升开发效率，视图和数据双向绑定 | 数据流复杂，性能优化难度高 | 需要响应式 UI 的单页面应用 |
| Flux/Redux | 数据流简单且可预测，易于调试 | 学习曲线陡，模板代码较多 | 状态复杂的大型前端项目 |
| 组件化模式 | 代码复用性高，易于维护 | 管理复杂项目的依赖关系需要经验 | 几乎所有现代前端框架 |
| 观察者模式 | 动态更新，视图和数据联动 | 调试和性能优化难度较大 | 实时更新的数据密集型应用（如仪表盘） |
选择建议
- 小型项目： 优先选择简单的 MVVM 或组件化模式。
- 中型项目： MVC 模式可提供更清晰的分层逻辑。
- 大型项目： Redux 或 Flux 更适合复杂的状态管理需求，结合组件化设计更佳。
个人还是比较喜欢Vue，因为自己不写什么大项目，Vue自动处理好了数据的双向绑定，不需要一直setState了，而且Vue是支持直接对数据操作的，比如数组的push，但是React还需要构建新数组
个人感觉，设计模式其实就是开发中的工具，重要的是怎么用舒服，而不是追求用得多高级。像我用 Vue3 比较多，它的 MVVM 模式加上响应式系统真的方便。需要管理全局状态，直接用 Pinia。至于 React，我接触过一点，它那种单向数据流的设计对复杂项目比较友好，但对我来说上手没 Vue3 那么快，而且写起来比较麻烦。
