最佳实践：同一事件的两个监听器分别需参数和无需参数如何处理

最优实现方案 #

这种场景无需拆分两个事件触发，统一触发一次携带参数的addObject事件即可。JavaScript 原生支持调用函数时传入超过形参数量的参数，不需要参数的监听器会自动忽略传入值，不会产生任何运行异常或逻辑问题。

优化后代码示例 #

事件触发逻辑

myFunction1() {
  const importantObject = {...};
  // other logic
  // 仅触发一次事件，携带参数
  this.emit('addObject', importantObject);
}

监听器注册逻辑

myFunction2() {
  // other logic
  const forceUpdate = this.forceUpdate.bind(this);
  // forceUpdate 不需要参数，传入的importantObject会被自动忽略，运行逻辑完全不受影响
  this.addListener('addObject', forceUpdate);
}

myFunction3() {
  // 注意原代码此处监听的事件名有误，需和触发的事件名保持一致
  this.addListener(
    'addObject',
    this.handlerFunction.bind(this),
  );
}

// handlerFunction 正常接收参数即可
handlerFunction(importantObject) {
  // 处理importantObject的相关逻辑
}

可选语义优化 #

如果需要更明确地声明某监听器不使用事件参数，可以在注册时包裹一层无参箭头函数，语义更清晰，也能避免后续事件传参变更影响该监听器逻辑：

this.addListener('addObject', () => {
  this.forceUpdate();
});

原方案的问题 #

拆分两个事件的实现会额外增加维护成本：后续如果addObject的触发时机、触发条件调整，需要同步修改addObjectWithParam的对应逻辑，容易出现遗漏导致bug，也破坏了同一业务事件的语义一致性。

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