JavaScript 中怎么使用状态模式优雅替代复杂的 switch-case 状态机-js教程-PHP中文网

状态模式通过将每个状态封装为独立类，实现状态切换与行为响应解耦，提升可扩展性、可读性和可测试性；其结构包括状态接口、具体状态类和持有状态引用的上下文对象。

javascript 中怎么使用状态模式优雅替代复杂的 switch-case 状态机

用状态模式替代 switch-case，核心是把每个状态封装成独立类，让状态切换和行为响应解耦，代码更易扩展、可读性更高、测试也更方便。

状态模式的基本结构

定义一个状态接口（或基类），每个具体状态实现该接口，上下文对象持有一个当前状态的引用，并把行为委托给当前状态对象处理。

避免在上下文中写大量 if/else 或 switch 判断状态分支
新增状态只需添加新类，不修改已有逻辑（开闭原则）
状态内部可管理自己的子状态、计时器、副作用等，职责更清晰

一个实际例子：订单状态机

假设订单有 pending → confirmed → shipped → delivered 几种状态，每种状态支持不同操作：

class Order {
  constructor() {
    this.state = new PendingState(this);
  }
<p>setState(state) {
this.state = state;
}</p><p>confirm() { this.state.confirm(); }
ship()    { this.state.ship(); }
deliver() { this.state.deliver(); }
}</p><p>class PendingState {
constructor(order) { this.order = order; }
confirm() { this.order.setState(new ConfirmedState(this.order)); }
ship()    { throw new Error("Cannot ship pending order"); }
deliver() { throw new Error("Cannot deliver pending order"); }
}</p><p>class ConfirmedState {
constructor(order) { this.order = order; }
confirm() { /<em> noop or log </em>/ }
ship()    { this.order.setState(new ShippedState(this.order)); }
deliver() { throw new Error("Cannot deliver before shipping"); }
}</p><p>// 后续状态类类似，略
</p>

用工厂 + 映射表简化状态创建

当状态较多或需从字符串初始化时，可用状态工厂避免硬编码 new：

Smart Model Switcher V5

智能模型自动切换 V5.0.2 - 多模态感知，自动识别图片/视频/音频/代码/文本任务，切换最优模型。支持图片理解(qwen3-vl-plus)、视频音频(qwen3.5-plus)、代码(glm-5)、Office文档(MiniMax-M2.5)、推理等场景。零感知切换，无需手动操作。

下载

const StateFactory = {
  pending: () => new PendingState(),
  confirmed: () => new ConfirmedState(),
  shipped: () => new ShippedState(),
  delivered: () => new DeliveredState()
};
<p>// 初始化时：
this.state = StateFactory[initialStateName]?.() ?? new PendingState();
</p>

配合 JSON 序列化/反序列化也很自然——只要状态类能还原自身关键字段，就能持久化整个状态机。