前端避免使用多个if else 的解决方法和示例

发布时间 2023-08-04 16:13:43作者: 崛起崛起

问题:代码走查过程中提示方法中包含多个ifelse,代码复杂度较高,不利于维护。

思考:有没有什么方法可以进行代码优化?

1. 使用条件对象

const conditions = {
  condition1: () => {
    // 处理条件1的逻辑
  },
  condition2: () => {
    // 处理条件2的逻辑
  },
  condition3: () => {
    // 处理条件3的逻辑
  }
};

// 根据条件名称执行对应的操作
function handleCondition(conditionName) {
  if (conditions[conditionName]) {
    conditions[conditionName]();
  } else {
    console.error("无效的条件名称");
  }
}

// 使用示例
handleCondition("condition1"); // 执行条件1的逻辑
handleCondition("condition2"); // 执行条件2的逻辑
handleCondition("condition3"); // 执行条件3的逻辑

通过这种方式,可以将每个条件的逻辑封装到一个函数中,然后在条件对象中映射每个条件的函数。这样,根据条件名称来执行对应的函数,可以避免使用多个 if else 语句来处理不同的条件逻辑。

使用条件对象的好处是可以很容易地添加、修改或删除条件逻辑,而不需要修改多个 if else 语句的代码。这有助于保持代码的清晰和可维护性。

2. 使用策略模式

const strategies = {
  strategy1: () => {
    // 处理策略1的逻辑
  },
  strategy2: () => {
    // 处理策略2的逻辑
  },
  strategy3: () => {
    // 处理策略3的逻辑
  }
};
// 定义策略执行函数
function executeStrategy(strategyName) {
  if (strategies[strategyName]) {
    return strategies[strategyName]();
  }
  console.error("无效的策略名称");
}

// 使用示例
executeStrategy("strategy1"); // 执行策略1的逻辑
executeStrategy("strategy2"); // 执行策略2的逻辑
executeStrategy("strategy3"); // 执行策略3的逻辑

通过这种方式,每个策略被封装到一个函数中,并在策略对象中进行映射。使用策略执行函数来执行相应的策略,可以避免使用多个 if else 来处理不同的条件逻辑。

使用策略模式的好处是可以将策略的实现与调用代码分离,使得代码更加可维护、可扩展和可重用。如果需要添加、修改或删除策略,只需要修改策略对象即可。这有助于增强代码的灵活性和可读性。