场景：电商促销折扣策略#

假设一个电商平台需要支持多种促销折扣（无折扣、满减、打折），通过策略模式动态切换折扣策略。

// 策略接口，定义折扣计算方法的规范
interface DiscountStrategy {
  calculate(price: number): number;
}

// 具体策略类: 实现不同的折扣算法
// 原价
class NoDiscount implements DiscountStrategy {
  calculate(price: number): number {
    return price;
  }
}
// 满减
class FullReduction implements DiscountStrategy {
  constructor(private threshold: number, private reduction: number) {}
  calculate(price: number): number {
    if (price >= this.threshold) {
      return price - this.reduction;
    }
    return price;
  }
}
// 打折
class PercentageDiscount implements DiscountStrategy {
  constructor(private percentage: number) {}
  calculate(price: number): number {
    return price * (1 - this.percentage / 100);
  }
}

// 上下文类
class ShoppingCart {
  private strategy: DiscountStrategy;
  constructor(strategy: DiscountStrategy = new NoDiscount()) {
    this.strategy = strategy;
  }

  setStrategy(strategy: DiscountStrategy) {
    this.strategy = strategy;
  }

  checkout(price: number): number {
    return this.strategy.calculate(price);
  }
}

// 使用示例:
const cart = new ShoppingCart();
// 默认无折扣
console.log(cart.checkout(100)); // 100
// 切换为满减策略(满200减50)
cart.setStrategy(new FullReduction(200, 50));
console.log(cart.checkout(300)); // 250
// 切换为打折策略(8折)
cart.setStrategy(new PercentageDiscount(20));
console.log(cart.checkout(300)); // 240

适用场景

可以看到上面的方式节省了大量的if...else...，还有一些其他适用场景比如：表单验证规则、权限校验、支付方式切换等等。
当满足以下情况时，都可以考虑使用：

• 各判断条件下的策略相互独立并且可复用
• 策略内部逻辑相对复杂
• 策略需要灵活组合

场景：实现一个事件总线#

type EventHandler = (...args: any[]) => void;

class EventBus {
  private events: Map<string, EventHandler[]> = new Map();

  // 订阅事件
  subscribe(eventName: string, handler: EventHandler): void {
    const handlers = this.events.get(eventName) || [];
    handlers.push(handler);
    this.events.set(eventName, handlers);
  }

  // 取消订阅
  unsubscribe(eventName: string, handler: EventHandler): void {
    const handlers = this.events.get(eventName);
    if (!handlers) return;
    const index = handlers.indexOf(handler);
    if (index > -1) {
      handlers.splice(index, 1);
    }
  }

  // 发布事件
  publish(eventName: string, ...args: any[]): void {
    const handlers = this.events.get(eventName);
    if (handlers) {
      handlers.forEach(handler => handler(...args));
    }
  }
}

// 使用示例
const eventBus = new EventBus();

// 订阅者A：监听登录事件
eventBus.subscribe('login', (user: string) => {
  console.log(`订阅者A：用户 ${user} 已登录`);
});

// 订阅者B：监听登录事件
const handlerB = (user: string) => {
  console.log(`订阅者B：欢迎 ${user}！`);
};
eventBus.subscribe('login', handlerB);

// 发布登录事件
eventBus.publish('login', '张三');
// 输出：
// 订阅者A：用户 张三 已登录
// 订阅者B：欢迎 张三！

// 取消订阅者B
eventBus.unsubscribe('login', handlerB);

// 再次发布事件
eventBus.publish('login', '李四');
// 输出：
// 订阅者A：用户 李四 已登录

适用场景

• 跨模块/组件通信：多个独立模块或组件需通信，但直接依赖会导致耦合
• 实时事件驱动系统（比如实时聊天系统）：需要实时响应异步事件并广播给多个消费者
• 日志和监控系统：多个子系统需要监听核心事件以记录日志或监控状态
• 插件化架构：允许第三方插件通过订阅事件扩展核心功能
• 批量任务处理：将任务分解为多个步骤，通过事件驱动异步处理
• … …

判断是否使用发布订阅模式的一些标准：

• 解耦需求：系统需要减少模块间的直接依赖
• 多对多通信：存在多个发布者和多个订阅者（如聊天室中所有用户既是发布者又是订阅者）
• 动态订阅关系：订阅关系需在运行时动态调整（如用户自定义通知偏好）
• 异步处理：事件处理可延迟或并行执行（如日志记录、非关键任务）
• 可扩展性需求：未来可能新增事件类型或订阅者（如插件系统）

场景：天气预报通知系统(当天气数据更新时，多个显示设备（手机、电视）自动刷新)#

气象站需要实时、同步地将温度变化通知所有显示设备（如手机、电视），确保数据更新的即时性。

interface Observe {
  update(temperature: number): void
}

// 被观察者
class WeatherStation {
  private observers: Observe[] = []
  private temperature: number = 0

  // 注册观察者
  attach(observer: Observe) {
    this.observers.push(observer)
  }
  // 移除观察者
  detach(observer: Observe) {
    const index = this.observers.indexOf(observer)
    if(index > -1) {
      this.observers.splice(index, 1)
    }
  }
  // 通知观察者
  notify() {
    this.observers.forEach(observer => observer.update(this.temperature))
  }
  // 更新温度并通知观察者
  setTemperature(temperature: number) {
    this.temperature = temperature
    this.notify()
  }
}

// 具体观察者
class PhoneDisplay implements Observe{
  update(temperature: number): void {
    console.log(`手机显示温度：${temperature}℃`);
  }
}

class TvDisplay implements Observe {
  update(temperature: number): void {
    console.log(`电视显示温度：${temperature}℃`);
  }
}

// 使用示例
const weatherStation = new WeatherStation()
const phone = new PhoneDisplay()
const tv = new TvDisplay()

// 显示注册观察者
weatherStation.attach(phone)
weatherStation.attach(tv)

weatherStation.setTemperature(20)
// 输出：
// 手机显示温度：25°C
// 电视显示温度：25°C

weatherStation.detach(tv);
weatherStation.setTemperature(30); 
// 输出：手机显示温度：30°C

适用场景

• UI组件联动: 例如表单输入框内容变化时，实时更新预览区域
• 状态管理工具: 例如 Redux 中 Store 状态变化触发 React 组件更新
• 实时数据监控：例如股票价格变动时通知多个显示终端

如何选择？

观察者模式：需要直接控制通知逻辑、保证实时性（如UI更新、游戏引擎）。 用发布订阅模式：需要解耦跨模块通信、支持动态扩展（如微服务、事件总线）。

场景：React高阶组件(HOC)#

动态为React组件添加日志、权限校验等能力

// 高阶组件（HOC）作为装饰器
import React from 'react';

// 组件接口：原始组件
interface ButtonProps {
    onClick: () => void;
    label: string;
}

class Button extends React.Component<ButtonProps> {
    render() {
        return <button onClick={this.props.onClick}>{this.props.label}</button>;
    }
}

// 装饰器：日志记录
function withLogging<P extends object>(WrappedComponent: React.ComponentType<P>) {
    return class extends React.Component<P> {
        componentDidMount() {
            console.log("组件已挂载");
        }

        render() {
            return <WrappedComponent {...this.props} />;
        }
    };
}

// 装饰器：权限校验
function withAuthCheck<P extends { isAuthenticated: boolean }>(
    WrappedComponent: React.ComponentType<P>
) {
    return class extends React.Component<P> {
        render() {
            if (this.props.isAuthenticated) {
                return <WrappedComponent {...this.props} />;
            } else {
                return <div>请先登录</div>;
            }
        }
    };
}

// 组合装饰器
const EnhancedButton = withLogging(withAuthCheck(Button));

// 使用装饰后的组件
const App = () => (
    <EnhancedButton
        label="点击我"
        onClick={() => console.log("按钮点击")}
        isAuthenticated={true}
    />
);

适用场景总结

• 需要动态添加或撤销功能：如运行时配置日志、缓存等。
• 避免多层继承导致代码臃肿：如多种可选功能的组合。
• 扩展第三方库对象：无法修改源码时，通过装饰器增强功能。