每个设计模式一个文件夹，包含详细注释、多种实现方式和实战案例。
所有示例均可直接node index.js运行。
关注对象的创建机制，在合适的时机以合适的方式创建对象。
| # | 模式 | 文件夹 | 核心思想 |
|---|---|---|---|
| 01 | 单例模式 Singleton | 01-singleton/ |
全局唯一实例 |
| 02 | 工厂模式 Factory | 02-factory/ |
封装对象创建逻辑 |
| 03 | 抽象工厂 Abstract Factory | 03-abstract-factory/ |
创建一整套产品族 |
| 04 | 建造者模式 Builder | 04-builder/ |
链式分步构建复杂对象 |
| 05 | 原型模式 Prototype | 05-prototype/ |
克隆已有对象创建新对象 |
关注类和对象的组合，形成更大的结构。
| # | 模式 | 文件夹 | 核心思想 |
|---|---|---|---|
| 06 | 适配器模式 Adapter | 06-adapter/ |
接口转换，兼容不一致 |
| 07 | 装饰器模式 Decorator | 07-decorator/ |
动态添加功能 |
| 08 | 代理模式 Proxy | 08-proxy/ |
控制对象访问 |
| 09 | 外观模式 Facade | 09-facade/ |
简化复杂子系统 |
| 10 | 组合模式 Composite | 10-composite/ |
树形结构，部分-整体 |
| 11 | 享元模式 Flyweight | 11-flyweight/ |
共享对象节省内存 |
关注对象之间的通信和职责分配。
| # | 模式 | 文件夹 | 核心思想 |
|---|---|---|---|
| 12 | 观察者模式 Observer | 12-observer/ |
一对多依赖，状态变化通知 |
| 13 | 策略模式 Strategy | 13-strategy/ |
封装可替换算法 |
| 14 | 命令模式 Command | 14-command/ |
请求封装为对象，支持撤销 |
| 15 | 模板方法 Template Method | 15-template-method/ |
定义算法骨架，子类填充步骤 |
| 16 | 迭代器模式 Iterator | 16-iterator/ |
统一遍历接口 |
| 17 | 状态模式 State | 17-state/ |
状态驱动行为变化 |
| 18 | 中介者模式 Mediator | 18-mediator/ |
集中管理对象通信 |
| 19 | 职责链模式 Chain of Responsibility | 19-chain-of-responsibility/ |
请求沿链传递 |
| 20 | 发布-订阅 Pub/Sub | 20-pub-sub/ |
通过消息中心完全解耦 |
# 运行任意一个设计模式
node 01-singleton/index.js
node 02-factory/index.js
# ...每个 index.js 都包含：
- 定义 — 这个模式是什么
- 适用场景 — 什么时候用
- 优缺点 — 权衡取舍
- 多种实现 — OOP 写法 + 函数式写法
- 实战案例 — 贴近真实业务的例子
需要全局唯一？ → 单例模式
需要封装创建逻辑？ → 工厂模式
需要创建一套配套对象？ → 抽象工厂
需要分步构建复杂对象？ → 建造者模式
需要复制已有对象？ → 原型模式
接口不兼容需要转换？ → 适配器模式
需要动态添加功能？ → 装饰器模式
需要控制对象访问？ → 代理模式
需要简化复杂系统？ → 外观模式
需要树形结构？ → 组合模式
大量相似对象需要节省内存？ → 享元模式
对象状态变化需要通知？ → 观察者模式
需要可替换的算法？ → 策略模式
需要撤销/重做/排队？ → 命令模式
算法骨架相同但步骤不同？ → 模板方法
需要统一遍历接口？ → 迭代器模式
行为随状态变化？ → 状态模式
多对象复杂交互？ → 中介者模式
请求需要多级处理？ → 职责链模式
需要完全解耦的通信？ → 发布-订阅
| 模式 | 在前端/Node.js 中的应用 |
|---|---|
| 单例 | Redux Store, Vuex Store, 数据库连接 |
| 工厂 | React.createElement(), document.createElement() |
| 建造者 | jQuery 链式调用, Knex.js 查询构建 |
| 原型 | Object.create(), 原型链继承 |
| 适配器 | axios 适配浏览器/Node 两端 |
| 装饰器 | HOC (高阶组件), Express 中间件, @decorator |
| 代理 | Vue 3 响应式 (ES6 Proxy), 图片懒加载 |
| 外观 | jQuery ($), Lodash |
| 组合 | React 组件树, 虚拟 DOM |
| 享元 | 事件委托, 连接池 |
| 观察者 | addEventListener, RxJS, EventEmitter |
| 策略 | Array.sort(compareFn), 表单验证规则 |
| 命令 | Redux action, 文本编辑器撤销/重做 |
| 模板方法 | React 生命周期, Vue hooks |
| 迭代器 | for...of, Generator, Symbol.iterator |
| 状态 | Promise (pending/fulfilled/rejected) |
| 中介者 | Vuex/Redux (集中状态管理) |
| 职责链 | Express/Koa 中间件, DOM 事件冒泡 |
| 发布-订阅 | Vue EventBus, postMessage, WebSocket |