点击按钮设置布尔变量值 是否有更优的代码实现方案？

你的场景完全可以通过传参的方式大幅优化，优化后只需维护1个公共函数即可替代原有的4个独立函数，逻辑一致性和可维护性都更强。

最优传参实现方案 #

你的4个函数逻辑本质高度统一：所有操作都会先把3个布尔变量默认置为false，仅第2~4个按钮需要额外将对应变量取反。基于这个共性可以抽离出统一的处理函数：

// 定义可切换的目标类型，TS环境可以加类型限制避免传错，JS环境可省略
type ToggleTarget = 'none' | 'display' | 'full' | 'page';

toggleImageState(target: ToggleTarget = 'none'): void {
  // 先存储要切换的变量的原始值
  const originalValue = target === 'none' ? false : this[target];
  // 所有变量统一置为false
  this.full = false;
  this.page = false;
  this.display = false;
  // 若为指定变量切换场景，将对应变量赋值为原始值取反
  if (target !== 'none') {
    this[target] = !originalValue;
  }
}

绑定使用方式 #

模板中给4个按钮绑定点击事件时分别传入对应参数即可：

• 第一个按钮（全部重置）：toggleImageState() 或 toggleImageState('none')
• 第二个按钮（zoom控制）：toggleImageState('display')
• 第三个按钮（full控制）：toggleImageState('full')
• 第四个按钮（page控制）：toggleImageState('page')

该方案完全兼容原有逻辑，后续如果新增状态变量，只需要在类型定义和变量置false的位置加对应字段即可，扩展性极强。

switch实现方案 #

你也可以通过switch语句实现，但是维护成本相对更高，仅适合偏好分支判断的场景：

toggleImageState(btnIndex: 1 | 2 | 3 | 4): void {
  switch(btnIndex) {
    case 1:
      this.full = this.page = this.display = false;
      break;
    case 2:
      this.full = this.page = false;
      this.display = !this.display;
      break;
    case 3:
      this.page = this.display = false;
      this.full = !this.full;
      break;
    case 4:
      this.full = this.display = false;
      this.page = !this.page;
      break;
  }
}

使用时对应传入1~4的按钮序号即可。

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