设计模式知识体系概览
什么是设计模式？
设计模式（Design Pattern） 是前人在大量实践中总结出来的、解决特定软件设计问题的通用方案。你可以把它理解为编程中的"棋谱"——遇到特定类型的问题时，有一套经过验证的解法可以直接参考。
设计模式最早由"四人帮"（Gang of Four）在 1994 年的《设计模式》一书中系统化，定义了 23 种经典模式。这些模式不绑定具体语言——Java 能用、JavaScript 也能用。
前端开发中为什么要学设计模式？
设计模式并不是学术理论，它在前端项目中无处不在：
| 你熟悉的技术 | 背后的设计模式 |
|---|---|
| Vue 的响应式系统 | 观察者模式 |
| React 的 HOC | 装饰器模式 |
| EventBus / EventEmitter | 发布订阅模式 |
| Axios 拦截器 | 责任链模式 |
| Vuex/Redux 的 Store | 单例模式 |
| 表单验证规则选择 | 策略模式 |
| ES6 Proxy | 代理模式 |
| Iterator 协议 | 迭代器模式 |
面试中考察设计模式主要有两个维度：
- 说出某种模式的定义和实现——比如"手写一个观察者模式"
- 在框架原理中识别模式——比如"Vue 的响应式用了什么模式？"
核心知识点概览
观察者模式与发布订阅——最高频的模式
观察者模式：一个对象（Subject）维护一组依赖它的对象（Observer），当状态变化时通知所有观察者。Vue 的响应式就是典型的观察者模式——数据（Subject）变化后，自动通知所有使用这个数据的组件（Observer）去更新。
发布订阅模式：和观察者类似，但多了一个中间层（事件中心）来解耦发布者和订阅者。EventBus、Node.js 的 EventEmitter 都是发布订阅模式。面试中经常考两者的区别。
单例模式——全局唯一实例
单例模式确保一个类只有一个实例，并提供一个全局访问点。前端中的应用：Vuex Store、全局弹窗管理器、请求实例（Axios instance）。实现方式包括闭包、class 静态属性等。
工厂模式——创建对象的"流水线"
工厂模式将对象创建的逻辑封装起来，调用方只需告诉工厂"我要什么类型的对象"，不需要知道具体的创建细节。React 的 createElement() 就是一个工厂函数——你告诉它标签类型和属性，它负责创建对应的虚拟 DOM 节点。
策略模式——消除 if-else 的利器
策略模式将一组算法（策略）分别封装成独立的类/函数，让它们可以互相替换。典型场景：表单验证（不同字段用不同的验证策略）、支付方式选择、动画缓动函数。它能有效消除代码中大量的 if-else 或 switch 分支。
代理模式——控制对象访问
代理模式为目标对象创建一个"替身"，控制对目标的访问。ES6 的 Proxy 就是语言层面对代理模式的实现——Vue 3 的响应式、数据校验、缓存代理、懒加载都可以用 Proxy 实现。
装饰器模式——不修改原始代码的增强
装饰器模式在不改变原始对象的情况下，动态地为它添加额外的功能。React 的 HOC（高阶组件） 是装饰器模式的典型应用——用一个函数包裹组件，给它添加额外的 props 或功能。TypeScript/ES 的装饰器语法（@decorator）也基于此模式。
设计模式的三大分类
学习建议
- 观察者/发布订阅 + 单例 → 面试最高频的两种模式
- 策略 + 工厂 + 代理 → 日常开发中最常见，消除烂代码的利器
- 装饰器 + 适配器 → 理解 HOC、框架适配层
- 迭代器 + 状态 + 命令 → 进阶模式
- 组合 + 模板方法 + 中介者 → 架构级模式