设计模式
分类
🔥 大热，必会
⭐ 要会
📖【JavaScript 设计模式与开发实践】书里有
- 创建型：对象“怎么创建”
- 结构型：对象“怎么组合”
- 行为型：对象“怎么协作”
创建型 Creational Patterns
把“创建对象”这件事抽离出来，避免到处 new + 控制复杂创建
控制：创建方式、创建时机、创建数量
js
// 1️⃣ 单例 👉 全局唯一
const store = {}
// 2️⃣ 工厂 👉 封装创建逻辑
createComponent(type)
// 3️⃣ 原型 👉 复制对象
Object.create(obj)
// 4️⃣ 建造者 👉 分步骤构建
builder.setA().setB().build()- 原型模式 Prototype Pattern ⭐
- 工厂模式 Factory Pattern
- 简单工厂模式
- 工厂方法模式 Factory Method Pattern ⭐
- 抽象工厂模式 Abstract Factory Pattern
- 单例模式 Singleton Pattern ⭐
- 建造者模式 Builder Pattern
结构型 Structural Patterns
让对象更好地“组织在一起”，如何让系统结构更清晰、可扩展
解决：结构复杂、系统耦合、组合关系
js
// 1️⃣ 适配器 👉 接口转换
adapter(data)
// 2️⃣ 装饰器 👉 功能增强
fn = withLog(fn)
// 3️⃣ 代理 👉 控制访问
new Proxy(obj)
// 4️⃣ 外观 👉 简化调用
request()
// 5️⃣ 组合 👉 树结构
<Component><Child /></Component>
// 6️⃣ 桥接 👉 多维解耦
new Button(new Theme())
// 7️⃣ 享元 👉 DOM 复用 / 缓存- 装饰器模式 Decorator Pattern ⭐
- 代理模式 Proxy Pattern ⭐
- 适配器模式 Adapter Pattern ⭐
- 外观模式 Facade Pattern 📖
- 组合模式 Composite Pattern 📖
- 享元模式 Flyweight Pattern 📖
- 桥接模式 Bridge Pattern
行为型 Behavioral Patterns
让对象之间更好地“协作”，对象之间如何通信和分工
解决：谁来做、怎么做、谁通知谁
js
// 1️⃣ 策略模式 👉 替换算法
strategies[type]()
// 2️⃣ 观察者/发布订阅 👉 发通知
eventBus.on()
eventBus.emit()
// 3️⃣ 迭代器 👉 遍历
for...of
// 4️⃣ 职责链 👉 一路传
middleware(req)
// 5️⃣ 模板方法 👉 定流程
baseClass.run()
// 6️⃣ 命令模式 👉 操作对象化
button.click = () => command.execute()
// 7️⃣ 状态模式 👉 状态驱动行为
if (state === 'loading') ...
// 优化为
stateMap[state]()
// 8️⃣ 访问者模式 👉 加操作不改结构
visitor.visit(node)
// 9️⃣ 备忘录模式 👉 存档恢复
history.push(state)
// 🔟 中介者模式 👉 中心协调
mediator.dispatch()
// 1️⃣1️⃣ 解释器模式（Interpreter） 👉 定义语言规则并解释执行
evaluate(expression)