背景

写多维度的条件判断时，很容易会写出又臭又长的代码。

举个简单的例子，假设我要写一个进入页面前根据用户身份跳转到不同页面的逻辑。

假设用户的 vip 身份有 normal、standard 和 proEdition 三种。

用户的项目组类型有 algorithm 和 UX 两种，用户的角色有 evangelist 和 follower 两种。

那么当我写判断时，很可能会写成 if 嵌套

if (user.vipType === 'standard') {
  if (user.groupType === 'algorithm') {
    if (user.role === 'evangelist') {
    } else {
    }
  } else if (user.groupType === 'UX') {
    if (user.role === 'evangelist') {
    } else {
    }
  }
} else if (user.vipType === 'proEdition') {
  if (user.groupType === 'algorithm') {
    if (user.role === 'evangelist') {
    } else {
    }
  } else if (user.groupType === 'UX') {
    if (user.role === 'evangelist') {
    } else {
    }
  }
} else {
  if (user.groupType === 'algorithm') {
    if (user.role === 'evangelist') {
    } else {
    }
  } else if (user.groupType === 'UX') {
    if (user.role === 'evangelist') {
    } else {
    }
  }
}

缺点

这样的代码分支太多，嵌套太多，而且堆积在一起，影响阅读感受。

维护时，在写处理函数时还总要耗费精力去注意外层 if 条件，以免写错行。

有可能出现在外层调用了作用于 vip 身份的 evangelist 角色的函数，但在写最深层处理时，由于疏忽，又再次调一遍。

优化

所以应该想办法去掉 if 嵌套，将3层条件合并为一层，将多个判断条件的组合合并为一个结果。

const DISPOSAL_METHOD_MAP = {
  standard_algorithm_evangelist: () => {},
  standard_UX_evangelist: () => {},
  standard_algorithm_follower: () => {},
  standard_UX_follower: () => {},
  proEdition_algorithm_evangelist: () => {},
  proEdition_UX_evangelist: () => {},
  proEdition_algorithm_follower: () => {},
  proEdition_UX_follower: () => {},
  normal_algorithm_evangelist: () => {},
  normal_UX_evangelist: () => {},
  normal_algorithm_follower: () => {},
  normal_UX_follower: () => {}
}
const disposal_method =
  DISPOSAL_METHOD_MAP[[user.vipType, user.groupType, user.role].join('_')]
  
try {
  disposal_method()
} catch (error) {}

好处

代码看上去更舒服。

对于每个具体分支分配单独的处理函数，这样不会写出函数重复调用的代码。