多关联事件监听器的逻辑处理是否存在对应设计模式？

当多个鼠标事件（如mousedown/mousemove/mouseup）之间存在隐式的共享状态依赖时，以下几种设计模式可以帮你把依赖关系显式化，让代码更易维护：

1. 封装交互上下文类 #

最直接的方式是把整个交互流程的状态和事件逻辑封装到一个类里，所有共享状态作为类的成员变量，事件处理函数作为类的方法。这样所有状态的读写都被收拢在类内部，每个方法对状态的依赖和修改一目了然。

示例代码：

class DragHandler {
  constructor() {
    // 初始化共享状态
    this.state1 = null;
    this.state2 = null;
    this.state3 = null;
  }

  handleMouseDown() {
    // 修改状态的逻辑明确归属这里
    this.state1 = this.setState1();
    this.state2 = this.setState2();
  }

  handleMouseMove() {
    // 显式使用类内的状态，依赖关系清晰
    this.consumeState2(this.state2);
    this.consumeState1(this.state1);
    this.state3 = this.setState3();
  }

  handleMouseUp() {
    this.consumeState3(this.state3);
    // 可选：清理状态，重置到初始状态
    this.resetState();
  }

  // 把状态操作的细节封装成私有辅助方法
  setState1() { /* ... */ }
  setState2() { /* ... */ }
  consumeState2(state) { /* ... */ }
  consumeState1(state) { /* ... */ }
  setState3() { /* ... */ }
  consumeState3(state) { /* ... */ }
  resetState() {
    this.state1 = null;
    this.state2 = null;
    this.state3 = null;
  }
}

// 使用时实例化
const dragHandler = new DragHandler();
element.addEventListener('mousedown', () => dragHandler.handleMouseDown());
element.addEventListener('mousemove', () => dragHandler.handleMouseMove());
element.addEventListener('mouseup', () => dragHandler.handleMouseUp());

2. 状态机模式 #

把整个交互过程拆分成几个明确的状态（比如Idle、Dragging），每个状态下只响应特定的事件，状态之间的转移规则显式定义。这种方式能完全消除隐式依赖，因为每个事件的行为只由当前状态决定。

示例代码：

const DragState = {
  IDLE: 'idle',
  DRAGGING: 'dragging'
};

class DragStateMachine {
  constructor() {
    this.currentState = DragState.IDLE;
    this.state1 = null;
    this.state2 = null;
    this.state3 = null;
  }

  handleEvent(event) {
    switch(this.currentState) {
      case DragState.IDLE:
        if (event.type === 'mousedown') {
          this.state1 = this.setState1();
          this.state2 = this.setState2();
          this.currentState = DragState.DRAGGING;
        }
        break;
      case DragState.DRAGGING:
        if (event.type === 'mousemove') {
          this.consumeState2(this.state2);
          this.consumeState1(this.state1);
          this.state3 = this.setState3();
        } else if (event.type === 'mouseup') {
          this.consumeState3(this.state3);
          this.resetState();
          this.currentState = DragState.IDLE;
        }
        break;
    }
  }

  // 辅助方法同之前的类
  setState1() { /* ... */ }
  setState2() { /* ... */ }
  // ... 其他辅助方法
  resetState() { /* ... */ }
}

// 使用
const stateMachine = new DragStateMachine();
element.addEventListener('mousedown', (e) => stateMachine.handleEvent(e));
element.addEventListener('mousemove', (e) => stateMachine.handleEvent(e));
element.addEventListener('mouseup', (e) => stateMachine.handleEvent(e));

3. 命令模式 #

把每个事件对应的操作封装成独立的命令对象，所有命令共享一个上下文对象来存储状态。每个命令明确声明自己需要读取哪些状态、修改哪些状态，依赖关系通过上下文显式传递。这种模式适合需要记录操作历史、支持撤销的场景。

示例代码：

// 共享上下文
const dragContext = {
  state1: null,
  state2: null,
  state3: null
};

// 命令类
class StartDragCommand {
  execute(context) {
    context.state1 = this.setState1();
    context.state2 = this.setState2();
  }

  setState1() { /* ... */ }
  setState2() { /* ... */ }
}

class UpdateDragCommand {
  execute(context) {
    this.consumeState2(context.state2);
    this.consumeState1(context.state1);
    context.state3 = this.setState3();
  }

  consumeState2(state) { /* ... */ }
  consumeState1(state) { /* ... */ }
  setState3() { /* ... */ }
}

class EndDragCommand {
  execute(context) {
    this.consumeState3(context.state3);
    context.state1 = null;
    context.state2 = null;
    context.state3 = null;
  }

  consumeState3(state) { /* ... */ }
}

// 使用
const startCmd = new StartDragCommand();
const updateCmd = new UpdateDragCommand();
const endCmd = new EndDragCommand();

element.addEventListener('mousedown', () => startCmd.execute(dragContext));
element.addEventListener('mousemove', () => updateCmd.execute(dragContext));
element.addEventListener('mouseup', () => endCmd.execute(dragContext));

这几种方案都能把原本隐式的状态依赖变得显式化，其中封装交互上下文类是最常用的方案，实现简单且结构清晰；如果交互流程复杂、状态转移多，状态机模式会更合适；如果需要支持操作记录或撤销，命令模式是更好的选择。

内容的提问来源于stack exchange，提问作者SandStone