前端新手常踩的坑：方法一改全站崩

Nexmoe2025-08-17 12:14

我最早写外卖下单页面的 OrderManager 时，把业务逻辑都塞成三个方法直接调：

arduino 复制代码

manager.placeOrder('Pad Thai', '1234')
manager.trackOrder('1234')
manager.cancelOrder('1234')

后来 PM 一句话「把 placeOrder 改成 addOrder 吧！」我就得全项目全局搜索替换，加班到凌晨两点。于是我痛定思痛，把这套逻辑拆成「命令对象」，以后改名字再也不用心惊胆战。

下面就是我现在的写法，你可以直接抄走：

1. 把订单列表和通用执行器留下

只留下公共数据 this.orders 与万能执行器 execute，其他方法全都挪走：

kotlin 复制代码

  class OrderManager {
  constructor() {
    this.orders = []
  }
  // 命令全部走这里
  execute(command, ...args) {
    return command.execute(this.orders, ...args)
  }
}

2. 给每个动作建一份命令对象

用一个高阶函数生成 Command，把真正的业务逻辑塞进去：

javascript 复制代码

// 基础母板
class Command {
  constructor(execute) {
    this.execute = execute
  }
}

function PlaceOrderCommand(order, id) {
  return new Command(orders => {
    orders.push(id)
    return `成功下单 ${order} (${id})`
  })
}

function CancelOrderCommand(id) {
  return new Command(orders => {
    orders.splice(orders.indexOf(id), 1)   // 注意是值而不是对象，别写错条件
    return `已取消订单 ${id}`
  })
}

function TrackOrderCommand(id) {
  return new Command(() => `订单 ${id} 还有 20 分钟抵达`)
}

3. 调用姿势变成「告诉执行器你要执行哪个命令」：

arduino 复制代码

const manager = new OrderManager()

manager.execute(new PlaceOrderCommand('Pad Thai', '1234'))
manager.execute(new TrackOrderCommand('1234'))
manager.execute(new CancelOrderCommand('1234'))

此时如果想把 PlaceOrderCommand 改成 AddOrderCommand，只需要改这一条命令对象的函数名，其余代码丝滑零改动。

踩过的坑对比

场景	直接方法调用	命令模式改造后
方法改名	全局查找替换，漏一处就炸	只改一处函数名
要加「撤销」功能	无现成钩子，得重写	在 Command 里加 `.undo` 就行
队列/延时执行	自己写定时器	命令对象天然可排队

适用面

小项目 CRUD 真的别上，代码变多显得啰嗦
大项目 / 需撤销、队列、批量回放等功能，命令模式能让扩展像拼图一样顺滑