js状态模式的web场景运用

• 举例子

1. 现在有一个英雄技能。英雄有四个技能，变身后，每个技能能得到强化。
2. 现在传入技能类型，和是否变身参数，释放对应的技能

// 原始代码  type: 技能类型 1|2|3|4     isSuper:是否变身 true|false
function getSkill(type, isSuper){
  if(type == 1) {
    if(isSuper){ 
      console.log('变身后，一技能')
    } else {
      console.log('一技能')
    }
  } else if(type == 2) {
    if(isSuper){ 
      console.log('变身后，二技能')
    } else {
      console.log('二技能')
    }
  } else if(type == 3) {
    if(isSuper){ 
      console.log('变身后，三技能')
    } else {
      console.log('三技能')
    }
  } else if(type == 4) {
    if(isSuper){ 
      console.log('变身后，四技能')
    } else {
      console.log('四技能')
    }
  }
}

• 考虑到英雄的技能状态只有两种，按照状态去区分会更清晰，所以按照状态改造

function getSkill(type, isSuper){
  if(isSuper) {
    if(type == 1) {
      console.log('变身后，一技能')
    } else if(type == 2) {
      console.log('变身后，二技能')
    } else if(type == 3) {
      console.log('变身后，三技能')
    } else if(type == 4) {
      console.log('变身后，四技能')
    }
  } else {
    if(type == 1) {
      console.log('一技能')
    } else if(type == 2) {
      console.log('二技能')
    } else if(type == 3) {
      console.log('三技能')
    } else if(type == 4) {
      console.log('四技能')
    }
  }
}

• 使用策略模式 + 状态模式精简代码。

1. 状态一：普通状态，调用mapSkill里面的方法
2. 状态二：变身状态，调用mapSkillSuper里面的方法

function getSkill(type, isSuper){
  const mapSkillSuper = {
      1: () => console.log('变身后，一技能'),
      2: () => console.log('变身后，二技能'),
      3: () => console.log('变身后，三技能'),
      4: () => console.log('变身后，四技能'),
  }
   const mapSkill = {
      1: () => console.log('一技能'),
      2: () => console.log('二技能'),
      3: () => console.log('三技能'),
      4: () => console.log('四技能'),
  }
  const mapFn = isSuper ? mapSkillSuper[type] : mapSkill[type]
  return mapFn()
}