如何简化带readOnly控制的重复事件处理代码？

• 消除重复逻辑，符合DRY原则：原代码里每个事件函数都重复写了if (!readOnly)的判断，封装后把这部分逻辑统一抽到doWhenNotReadOnly里，事件函数只需要专注于核心业务逻辑，不用再冗余处理状态判断。
• 可维护性大幅提升：如果以后需要修改判断规则（比如换成判断disabled状态，或者增加额外条件），只需要修改doWhenNotReadOnly这一个函数，不用逐个修改所有事件函数，避免了漏改、错改的风险。
• 代码职责更清晰：事件函数的职责单一，只处理业务动作；状态拦截的逻辑集中管理，代码结构更清晰，可读性更强。

另外可以再给个更顺手的优化写法——用高阶函数提前包装事件，不用修改模板：

// 定义通用拦截函数
const withReadOnlyGuard = (fn) => () => {
  if (readOnly) return;
  fn();
};

// 直接包装事件函数
const event1 = withReadOnlyGuard(() => {
  // do something
});

const event2 = withReadOnlyGuard(() => {
  // do something
});

模板里还是保持原来的写法：

<div>
  <div onclick="event1" />
  <div onclick="event2" />
  <div onclick="event3" />
</div>

这样连模板里的调用都不用改，代码更简洁统一。

原代码的问题就是重复代码太多，维护成本高，一旦状态判断逻辑变化，要改N个地方，你的封装方案完美解决了这些问题，是明显更优的实现。

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