设计模式是软件开发的基本组成部分，它们为常见问题提供了经过验证的典型解决方案。 本版块整理了 21 种 最常用的 JavaScript/TypeScript 设计模式，涵盖创建型、结构型、行为型三大类别，均配有生产级伪代码示例和前端实战场景。

目录

创建型模式（4 种）

• ✅ 单例模式 Singleton — 全局唯一实例，状态管理/日志/配置
• ✅ 工厂模式 Factory — 封装对象创建逻辑，屏蔽实现细节
• ✅ 建造者模式 Builder — 分步构建复杂对象，链式调用
• ✅ 原型模式 Prototype — 克隆对象，Object.create / structuredClone

结构型模式（5 种）

• ✅ 适配器模式 Adapter — 接口转换，统一不同 API 格式
• ✅ 装饰器模式 Decorator — 动态添加功能，HOC / 日志 / 缓存
• ✅ 代理模式 Proxy — 控制访问，ES6 Proxy / 懒加载 / 缓存
• ✅ 外观模式 Facade — 封装复杂子系统，提供简洁 API
• ✅ 组合模式 Composite — 树形结构，递归组件 / DOM 操作

行为型模式（7 种）

• ✅ 观察者模式 Observer — 一对多通知，事件监听 / 响应式
• ✅ 发布-订阅模式 PubSub — 事件通道解耦，跨模块通信
• ✅ 策略模式 Strategy — 算法可替换，表单校验 / 支付
• ✅ 命令模式 Command — 请求封装，撤销/重做 / 队列
• ✅ 状态模式 State — 状态驱动行为，订单流转 / 请求状态
• ✅ 迭代器模式 Iterator — 遍历集合，Generator / for-of
• ✅ 责任链模式 Chain of Responsibility — 请求沿链传递，中间件 / 拦截器

扩展模式（5 种）

• ✅ 享元模式 Flyweight — 共享减少内存，对象池 / 虚拟列表
• ✅ 中介者模式 Mediator — 星形通信，聊天室 / 组件协调
• ✅ 模板方法模式 Template Method — 定义算法骨架，生命周期 / 数据导入
• ✅ 模块模式 Module — 私有封装，ES Module / IIFE
• ✅ 混合模式 Mixin — 功能组合，替代多重继承

部分内容翻译整理自 patterns.dev 及 Refactoring Guru，并结合前端实战做了本地化改编。