JavaScript设计模式入门教程：从零开始掌握编程艺术
项目地址: https://gitcode.com/gh_mirrors/ja/javascript-design-patterns-for-humans 还在为复杂的代码结构而头疼？面对重复的业务逻辑不知如何优雅重构？本文将带你系统学习JavaScript设计模式，掌握23种经典模式的精髓，让你的代码从"能用"升级到"专业"！
🎯 读完本文你将获得
- 设计模式的三大分类体系理解
- 6种创建型模式的实战应用
- 7种结构型模式的代码实现
- 10种行为型模式的核心思想
- 真实项目中的模式选择指南
- 避免常见反模式的实用技巧
📊 设计模式分类总览
🚀 为什么要学习设计模式？
设计模式是软件工程中经过验证的最佳实践解决方案。它们不是具体的代码实现，而是解决特定问题的思维框架和设计指导。
设计模式的三大价值
- 提高代码可维护性 - 模式化的代码结构清晰，易于理解和修改
- 增强代码复用性 - 通用解决方案可以在不同项目中重复使用
- 促进团队协作 - 统一的设计语言让团队成员沟通更高效
🏗️ 创建型模式：对象的诞生艺术
创建型模式专注于对象的创建机制，让对象创建更加灵活和可控。
💍 单例模式（Singleton） - 独一无二的存在
应用场景：全局配置管理、日志记录器、数据库连接池
class Logger {
constructor() {
if (Logger.instance) {
return Logger.instance;
}
this.logs = [];
Logger.instance = this;
}
log(message) {
this.logs.push(message);
console.log(`日志: ${message}`);
}
printLogCount() {
console.log(`共有 ${this.logs.length} 条日志`);
}
}
// 使用示例
const logger1 = new Logger();
const logger2 = new Logger();
logger1.log('第一条日志');
logger2.log('第二条日志');
console.log(logger1 === logger2); // true
logger1.printLogCount(); // 共有 2 条日志
🏭 工厂模式（Factory） - 专业的生产线
应用场景：UI组件创建、支付方式选择、文件格式处理
class Button {
constructor(text, color) {
this.text = text;
this.color = color;
}
render() {
return `<button style="background-color: ${this.color}">${this.text}</button>`;
}
}
class Dialog {
constructor(title, message) {
this.title = title;
this.message = message;
}
render() {
return `<div class="dialog"><h3>${this.title}</h3><p>${this.message}</p></div>`;
}
}
class UIFactory {
static createComponent(type, config) {
switch (type) {
case 'button':
return new Button(config.text, config.color);
case 'dialog':
return new Dialog(config.title, config.message);
default:
throw new Error('未知的UI组件类型');
}
}
}
// 使用示例
const primaryButton = UIFactory.createComponent('button', {
text: '点击我',
color: '#007bff'
});
const alertDialog = UIFactory.createComponent('dialog', {
title: '提示',
message: '操作成功！'
});
console.log(primaryButton.render());
console.log(alertDialog.render());
👷 建造者模式（Builder） - 精细的组装工艺
应用场景：复杂对象创建、SQL查询构建、HTTP请求配置
class Pizza {
constructor(builder) {
this.size = builder.size;
this.cheese = builder.cheese || false;
this.pepperoni = builder.pepperoni || false;
this.bacon = builder.bacon || false;
this.vegetables = builder.vegetables || [];
}
describe() {
let description = `${this.size}寸比萨`;
if (this.cheese) description += '，加奶酪';
if (this.pepperoni) description += '，加意大利香肠';
if (this.bacon) description += '，加培根';
if (this.vegetables.length > 0) {
description += `，加${this.vegetables.join('、')}`;
}
return description;
}
}
class PizzaBuilder {
constructor(size) {
this.size = size;
}
addCheese() {
this.cheese = true;
return this;
}
addPepperoni() {
this.pepperoni = true;
return this;
}
addBacon() {
this.bacon = true;
return this;
}
addVegetables(vegetables) {
this.vegetables = vegetables;
return this;
}
build() {
return new Pizza(this);
}
}
// 使用示例
const myPizza = new PizzaBuilder(12)
.addCheese()
.addPepperoni()
.addVegetables(['蘑菇', '青椒', '洋葱'])
.build();
console.log(myPizza.describe()); // 12寸比萨，加奶酪，加意大利香肠，加蘑菇、青椒、洋葱
🧩 结构型模式：组件的连接艺术
结构型模式关注如何将类或对象组合成更大的结构，同时保持结构的灵活和高效。
🔌 适配器模式（Adapter） - 通用的转换器
应用场景：第三方库集成、API版本兼容、数据格式转换
// 老式接口
class OldCalculator {
operations(term1, term2, operation) {
switch (operation) {
case 'add':
return term1 + term2;
case 'sub':
return term1 - term2;
default:
return NaN;
}
}
}
// 新式接口
class NewCalculator {
add(term1, term2) {
return term1 + term2;
}
sub(term1, term2) {
return term1 - term2;
}
}
// 适配器
class CalculatorAdapter {
constructor() {
this.newCalculator = new NewCalculator();
}
operations(term1, term2, operation) {
switch (operation) {
case 'add':
return this.newCalculator.add(term1, term2);
case 'sub':
return this.newCalculator.sub(term1, term2);
default:
return NaN;
}
}
}
// 使用示例
const oldCalc = new OldCalculator();
console.log(oldCalc.operations(10, 5, 'add')); // 15
const adapter = new CalculatorAdapter();
console.log(adapter.operations(10, 5, 'add')); // 15
☕ 装饰器模式（Decorator） - 动态的功能增强
应用场景：功能扩展、中间件处理、AOP编程
class Coffee {
cost() {
return 5;
}
description() {
return '普通咖啡';
}
}
// 装饰器基类
class CoffeeDecorator {
constructor(coffee) {
this.coffee = coffee;
}
cost() {
return this.coffee.cost();
}
description() {
return this.coffee.description();
}
}
// 具体装饰器
class MilkDecorator extends CoffeeDecorator {
cost() {
return this.coffee.cost() + 2;
}
description() {
return this.coffee.description() + '，加牛奶';
}
}
class SugarDecorator extends CoffeeDecorator {
cost() {
return this.coffee.cost() + 1;
}
description() {
return this.coffee.description() + '，加糖';
}
}
class WhipCreamDecorator extends CoffeeDecorator {
cost() {
return this.coffee.cost() + 3;
}
description() {
return this.coffee.description() + '，加奶油';
}
}
// 使用示例
let myCoffee = new Coffee();
console.log(`${myCoffee.description()} - ￥${myCoffee.cost()}`);
myCoffee = new MilkDecorator(myCoffee);
console.log(`${myCoffee.description()} - ￥${myCoffee.cost()}`);
myCoffee = new SugarDecorator(myCoffee);
console.log(`${myCoffee.description()} - ￥${myCoffee.cost()}`);
myCoffee = new WhipCreamDecorator(myCoffee);
console.log(`${myCoffee.description()} - ￥${myCoffee.cost()}`);
📊 设计模式选择指南
| 场景 | 推荐模式 | 优点 | 注意事项 |
|---|---|---|---|
| 全局状态管理 | 单例模式 | 确保唯一实例 | 避免过度使用，可能引入全局状态 |
| 复杂对象创建 | 建造者模式 | 参数灵活，易于扩展 | 代码量相对较多 |
| 接口兼容 | 适配器模式 | 不修改原有代码 | 可能增加系统复杂度 |
| 功能扩展 | 装饰器模式 | 动态添加功能 | 装饰器链不宜过长 |
| 对象复用 | 享元模式 | 减少内存占用 | 需要仔细设计内部状态 |
| 算法选择 | 策略模式 | 避免条件判断 | 策略类可能过多 |
🎯 行为型模式：对象的协作艺术
行为型模式专注于对象之间的通信和职责分配，让对象协作更加高效。
👀 观察者模式（Observer） - 智能的消息通知
应用场景：事件处理、数据绑定、消息推送
// 主题（被观察者）
class Subject {
constructor() {
this.observers = [];
this.state = null;
}
addObserver(observer) {
this.observers.push(observer);
}
removeObserver(observer) {
this.observers = this.observers.filter(obs => obs !== observer);
}
notifyObservers() {
this.observers.forEach(observer => {
observer.update(this.state);
});
}
setState(state) {
this.state = state;
this.notifyObservers();
}
}
// 观察者
class Observer {
constructor(name) {
this.name = name;
}
update(state) {
console.log(`${this.name} 收到状态更新: ${state}`);
}
}
// 使用示例
const subject = new Subject();
const observer1 = new Observer('观察者1');
const observer2 = new Observer('观察者2');
const observer3 = new Observer('观察者3');
subject.addObserver(observer1);
subject.addObserver(observer2);
subject.addObserver(observer3);
subject.setState('新状态1');
subject.removeObserver(observer2);
subject.setState('新状态2');
🎮 策略模式（Strategy） - 灵活的算法选择
应用场景：支付方式选择、排序算法、验证规则
// 策略接口
class PaymentStrategy {
pay(amount) {
throw new Error('必须实现pay方法');
}
}
// 具体策略
class AlipayStrategy extends PaymentStrategy {
pay(amount) {
console.log(`使用支付宝支付 ￥${amount}`);
// 支付宝支付逻辑
}
}
class WechatPayStrategy extends PaymentStrategy {
pay(amount) {
console.log(`使用微信支付 ￥${amount}`);
// 微信支付逻辑
}
}
class BankCardStrategy extends PaymentStrategy {
pay(amount) {
console.log(`使用银行卡支付 ￥${amount}`);
// 银行卡支付逻辑
}
}
// 上下文
class PaymentContext {
constructor(strategy) {
this.strategy = strategy;
}
setStrategy(strategy) {
this.strategy = strategy;
}
executePayment(amount) {
this.strategy.pay(amount);
}
}
// 使用示例
const payment = new PaymentContext(new AlipayStrategy());
payment.executePayment(100);
payment.setStrategy(new WechatPayStrategy());
payment.executePayment(200);
payment.setStrategy(new BankCardStrategy());
payment.executePayment(300);
📈 设计模式学习路线图
🚀 实战应用：电商系统设计模式整合
让我们通过一个电商系统的例子，看看如何综合运用多种设计模式：
// 单例模式 - 购物车
class ShoppingCart {
constructor() {
if (ShoppingCart.instance) {
return ShoppingCart.instance;
}
this.items = [];
ShoppingCart.instance = this;
}
addItem(item) {
this.items.push(item);
}
getTotal() {
return this.items.reduce((total, item) => total + item.price, 0);
}
}
// 工厂模式 - 商品创建
class ProductFactory {
static createProduct(type, name, price) {
switch (type) {
case 'electronic':
return new ElectronicProduct(name, price);
case 'clothing':
return new ClothingProduct(name, price);
case 'book':
return new BookProduct(name, price);
default:
throw new Error('未知的商品类型');
}
}
}
// 策略模式 - 折扣策略
class DiscountStrategy {
applyDiscount(amount) {
throw new Error('必须实现applyDiscount方法');
}
}
class NoDiscount extends DiscountStrategy {
applyDiscount(amount) {
return amount;
}
}
class PercentageDiscount extends DiscountStrategy {
constructor(percentage) {
super();
this.percentage = percentage;
}
applyDiscount(amount) {
return amount * (1 - this.percentage / 100);
}
}
class FixedDiscount extends DiscountStrategy {
constructor(amount) {
super();
this.amount = amount;
}
applyDiscount(total) {
return Math.max(0, total - this.amount);
}
}
// 观察者模式 - 库存通知
class Inventory {
constructor() {
this.observers = [];
this.stock = {};
}
addObserver(observer) {
this.observers.push(observer);
}
setStock(productId, quantity) {
this.stock[productId] = quantity;
this.notifyObservers(productId, quantity);
}
notifyObservers(productId, quantity) {
this.observers.forEach(observer => {
observer.onStockChange(productId, quantity);
});
}
}
// 使用示例
const cart = new ShoppingCart();
const inventory = new Inventory();
// 创建商品
const laptop = ProductFactory.createProduct('electronic', '笔记本电脑', 5000);
const shirt = ProductFactory.createProduct('clothing', 'T恤', 100);
// 添加到购物车
cart.addItem(laptop);
cart.addItem(shirt);
// 设置折扣策略
const discount = new PercentageDiscount(10);
const total = cart.getTotal();
const finalPrice = discount.applyDiscount(total);
console.log(`原价: ￥${total}, 折后价: ￥${finalPrice}`);
// 库存变化通知
inventory.addObserver({
onStockChange: (productId, quantity) => {
console.log(`商品 ${productId} 库存更新为: ${quantity}`);
}
});
inventory.setStock('P001', 50);
💡 设计模式最佳实践
1. 不要过度设计
设计模式是工具，不是目标。只有在真正需要时才使用模式，避免为了使用模式而使用模式。
2. 保持简单性
优先选择简单的解决方案，只有在简单方案无法满足需求时才考虑使用设计模式。
3. 理解模式本质
不要死记硬背模式结构，要理解每个模式解决的问题和适用场景。
4. 结合项目实际
根据项目的规模、团队的技术水平和业务需求来选择合适的设计模式。
5. 持续重构
设计模式的应用是一个持续的过程，随着需求的变化不断调整和优化代码结构。
🎯 总结
JavaScript设计模式是每个前端开发者必须掌握的核心技能。通过本文的学习，你已经了解了：
- ✅ 设计模式的三大分类和23种经典模式
- ✅ 各种模式的适用场景和实现方式
- ✅ 实际项目中的模式选择和应用技巧
- ✅ 避免常见陷阱的最佳实践
记住，设计模式不是银弹，而是解决问题的工具箱。真正的 mastery 在于知道什么时候使用什么工具，以及如何灵活地组合使用它们。
现在就开始在你的项目中实践这些模式吧！从简单的单例模式开始，逐步尝试更复杂的模式组合，你会发现代码质量和开发效率都有显著提升。
下一步行动：
- 选择1-2个模式在现有项目中实践
- 阅读经典开源项目的源码学习模式应用
- 尝试重构旧代码应用设计模式
- 与团队成员分享学到的模式知识
设计模式的学习之旅才刚刚开始，持续实践和总结，你一定能成为设计模式的应用高手！
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
