设计模式分类解析与JavaScript实现

以下是一篇按照设计模式类型分类的博客文章，结合JavaScript代码实现，并附有来源标注：

设计模式分类解析与JavaScript实现

设计模式是解决软件设计中常见问题的可复用方案模板，通过分类学习能帮助开发者快速掌握核心思想。本文将23种设计模式分为创建型 （单例模式、工厂模式、原型模式和建造者模式等）、结构型 （适配器模式、装饰器模式、代理模式、组合模式和外观模式）、行为型 （策略模式、观察者模式、模板方法模式和责任链模式）三类，结合代码示例解析其应用场景。

一、创建型模式（关注对象创建）

1. 单例模式（Singleton）

定义：确保一个类只有一个实例，并提供全局访问点。
适用场景 ：数据库连接池、全局配置管理。
JS实现：

javascript 复制代码

class Singleton {
  constructor() {
    if (!Singleton.instance) {
      this.data = "私有数据";
      Singleton.instance = this;
    }
    return Singleton.instance;
  }
}
// 测试
const s1 = new Singleton();
const s2 = new Singleton();
console.log(s1 === s2); // true

来源：

2. 工厂模式（Factory）

定义：封装对象创建逻辑，降低耦合。
适用场景 ：支付系统多支付方式切换。
JS实现：

javascript 复制代码

class Payment {
  pay() {}
}

class Alipay extends Payment {
  pay() { console.log("支付宝支付"); }
}

class WeChatPay extends Payment {
  pay() { console.log("微信支付"); }
}

function createPayment(type) {
  return type === "alipay" ? new Alipay() : new WeChatPay();
}
// 使用
const pay = createPayment("alipay");
pay.pay(); // 支付宝支付

来源：

二、结构型模式（关注类与对象组合）

3. 适配器模式（Adapter）

定义：转换接口使不兼容类协同工作。
适用场景 ：第三方API接口适配。
JS实现：

javascript 复制代码

// 原始接口
class OldSystem {
  request(data) { console.log("旧系统处理:", data); }
}

// 目标接口
class NewSystem {
  process(data) { console.log("新系统处理:", data); }
}

// 适配器
class Adapter {
  constructor(oldSystem) {
    this.oldSystem = oldSystem;
  }
  process(data) {
    const adaptedData = { ...data, format: "new" };
    this.oldSystem.request(adaptedData);
  }
}
// 使用
const old = new OldSystem();
const adapter = new Adapter(old);
adapter.process({订单号: 123}); // 旧系统处理: {订单号: 123, format: "new"}

来源：

4. 装饰器模式（Decorator）

定义：动态添加对象职责，不改变原结构。
适用场景 ：为对象添加日志/权限控制。
JS实现：

javascript 复制代码

function decorator(target) {
  return class extends target {
    operation() {
      console.log("权限校验通过");
      return super.operation();
    }
  };
}

class Coffee {
  cost() { return 10; }
}

const decoratedCoffee = new decorator(Coffee);
console.log(decoratedCoffee.cost()); // 权限校验通过 10

来源：

三、行为型模式（关注对象交互）

5. 策略模式（Strategy）

定义：封装算法族，使算法可互换。
适用场景 ：电商促销活动切换。
JS实现：

javascript 复制代码

interface Strategy {
  calculate(price) { throw new Error("未实现"); }
}

class DiscountStrategy implements Strategy {
  calculate(price) { return price * 0.9; }
}

class NoDiscountStrategy implements Strategy {
  calculate(price) { return price; }
}

class Order {
  constructor(strategy) {
    this.strategy = strategy;
  }
  setStrategy(strategy) { this.strategy = strategy; }
  getTotal(price) { return this.strategy.calculate(price); }
}
// 使用
const order = new Order(new DiscountStrategy());
console.log(order.getTotal(100)); // 90
order.setStrategy(new NoDiscountStrategy());
console.log(order.getTotal(100)); // 100

来源：

6. 观察者模式（Observer）

定义：定义一对多依赖关系，状态变化自动通知。
适用场景 ：消息推送、股票行情更新。
JS实现：

javascript 复制代码

class Subject {
  constructor() {
    this.observers = [];
  }
  subscribe(observer) { this.observers.push(observer); }
  unsubscribe(observer) { this.observers = this.observers.filter(obs => obs !== observer); }
  notify(data) { this.observers.forEach(observer => observer.update(data)); }
}

class Observer {
  update(data) { console.log("收到通知:", data); }
}

// 使用
const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();
subject.subscribe(observer1);
subject.subscribe(observer2);
subject.notify("数据更新"); // 两次收到通知

来源：

总结

设计模式通过标准化解决方案提升代码质量，但需避免滥用。建议结合项目实践，从单例、工厂、策略等高频模式入手，逐步掌握设计模式的精髓。更多模式解析可参考《图说设计模式》的UML图解与代码示例。

设计模式根据其核心目标可分为创建型 、结构型 、行为型三大类，共23种。以下是详细分类及解析：

一、创建型模式（关注对象创建）

核心目标 ：管理对象的创建过程，确保系统灵活性和资源控制。
常见模式：

单例模式 ：保证一个类只有一个实例，适用于全局资源管理（如数据库连接池、配置管理）。
javascript 复制代码
```
class Singleton { /*...*/ } // 示例代码见用户历史对话
```
工厂模式：封装对象创建逻辑，降低耦合（如支付系统多支付方式切换）。
抽象工厂模式：创建相关对象家族，解耦客户端与具体实现。
原型模式：通过复制现有对象快速创建新实例（如游戏存档克隆）。
建造者模式：分步构建复杂对象（如订单参数组合）。

二、结构型模式（关注类与对象组合）

核心目标 ：通过组合优化系统结构，提升扩展性。
常见模式：

适配器模式 ：转换接口兼容不兼容类（如第三方API适配）。
javascript 复制代码
```
class Adapter { /*...*/ } // 示例代码见用户历史对话
```
装饰器模式：动态添加职责（如为咖啡添加配料）。
代理模式：控制对象访问（如远程调用代理）。
组合模式：统一处理对象与组合（如文件系统目录管理）。
外观模式：提供简化接口（如智能家居控制面板）。

三、行为型模式（关注对象交互）

核心目标 ：定义对象间通信方式，增强灵活性。
常见模式：

策略模式 ：封装算法族（如电商促销策略切换）。
javascript 复制代码
```
class Strategy { /*...*/ } // 示例代码见用户历史对话
```
观察者模式：一对多依赖通知（如消息推送系统）。
模板方法模式：定义算法骨架（如HTTP请求处理流程）。
责任链模式：链式处理请求（如权限校验流程）。
状态模式：对象状态驱动行为（如订单状态流转）。

总结

设计模式通过标准化解决方案提升代码质量，但需避免滥用。建议从单例、工厂、策略等高频模式入手，结合项目实践逐步掌握。更多模式解析可参考《图说设计模式》的UML图解与代码示例。