【代码优化】这段JS 代码能否用策略模式优化一下

Question

`

 getDepStatus(id) {
    this.$axios
      .get(url)
      .then(res => {
        if (res.success) {
          //todo 高能预警 下面这段代码十分恶心
          //判断tab的操作按钮状态
          this.bottleReady.isOperation =
            (res.result.status == 2 &&
              res.result.deptStatus.bottleStatus == 1) ||
            res.result.deptStatus.bottleStatus == 3;
          this.eqtReady.isOperation =
            (res.result.status == 2 &&
              res.result.deptStatus.equipmentStatus === 1) ||
            res.result.deptStatus.equipmentStatus === 3;
          this.materialReady.isOperation =
            (res.result.status == 2 &&
              res.result.deptStatus.materialStatus === 1) ||
            res.result.deptStatus.materialStatus === 3;
          this.reagentReady.isOperation =
            (res.result.status == 2 &&
              res.result.deptStatus.reagentStatus === 1) ||
            res.result.deptStatus.reagentStatus === 3;
          this.userReady.isOperation =
            (res.result.status == 2 &&
              res.result.deptStatus.userStatus === 1) ||
            res.result.deptStatus.userStatus === 3;
          //判断tab的审核按钮状态
          this.bottleReady.isAudit =
            res.result.status === 2 &&
            res.result.deptStatus.bottleStatus === 2;
          this.eqtReady.isAudit =
            res.result.status == 2 &&
            res.result.deptStatus.equipmentStatus === 2;
          this.materialReady.isAudit =
            res.result.status == 2 &&
            res.result.deptStatus.materialStatus === 2;
          this.reagentReady.isAudit =
            res.result.status == 2 &&
            res.result.deptStatus.reagentStatus === 2;
          this.userReady.isAudit =
            res.result.status == 2 && res.result.deptStatus.userStatus === 2;
          //判断审核反馈
          this.bottleReady.bottleStatus = res.result.bottleStatus;
          this.bottleReady.bottleReason = res.result.bottleReason;

          this.eqtReady.bottleStatus = res.result.bottleStatus;
          this.eqtReady.bottleReason = res.result.bottleReason;

          this.materialReady.materialStatus = res.result.materialStatus;
          this.materialReady.materialReason = res.result.materialReason;

          this.reagentReady.reagentStatus = res.result.reagentStatus;
          this.reagentReady.reagentReason = res.result.reagentReason;

          this.userReady.userStatus = res.result.userStatus;
          this.userReady.userReason = res.result.userReason;
          //处理审核状态以及反馈
        } else {
          this.$message.error(res.message);
        }
      });
  },

`
以上这段代码 各个变量根据接口返回状态各自判断 权限状态 是否有优化的空间

Answer 1

getDepStatus(id) {
    this.$axios.get(url).then(res => {
        if (res.success) {
            this.init(res.result)
        } else {
            this.$message.error(res.message);
        }
    });
},
init(result) {
    const status_1 = 1, status_2 = 2, status_3 = 3

    function isOperation(atr) {
        return (result.status == status_2 && result.deptStatus[atr]=== status_1) || result.deptStatus[atr] == status_3
    }

    function isAudit(atr) {
        return result.status === status_2 && result.deptStatus[atr] === status_2
    }

    function getReadys(atr) {
        const atrStatus = `${atr}Status`
        const atrReason = `${atr}Reason`

        let obj = {}

        obj.isOperation = isOperation(atrStatus)
        obj.isAudit = isAudit(atrStatus)
        obj[atrStatus] = result[atrStatus]
        obj[atrReason] = result[atrReason]

        return obj
    }
    
    this.bottleReady = this.getReadys('bottle')
    this.eqtReady = this.getReadys('equipment')
    this.materialReady = this.getReadys('material')
    this.reagentReady = this.getReadys('reagent')
    this.userReady = this.getReadys('user')
}

如果你的eqt跟equipment名字统一就更简单了，给个常亮数组，写个循环就行
以后只维护数据即可，例如

const buttons = ['bottle', 'eqt', 'material', 'reagent', 'user']
buttons.forEach(e => {
    this[`${e}Ready`] = this.getReadys(e)
})

Answer 2

1. 这段代码可以优化，不过是在可读性上，比如用常量代替数字，用变量名代替缩写等
2. 策略模式在这种单一逻辑环节上作用不大，更适合优化复杂的多步操作

Answer 3

复杂度下降了，但是不确定对不对

getDepStatus(id) {
    this.$axios.get(url).then(res => {
        if (res.success) {
            setButtonStatus('bottleReady', 'bottleStatus');
            setButtonStatus('eqtReady', 'equipmentStatus');
            setButtonStatus('materialReady', 'materialStatus');
            setButtonStatus('reagentReady', 'reagentStatus');
            setButtonStatus('userReady', 'userStatus');
        } else {
            this.$message.error(res.message);
        }
    });
}

function setButtonStatus(buttonName, statusName) {
    this[buttonName].isOperation = getOperationStatus(statusName);
    this[buttonName].isAudit = getAuditStatus(statusName);
    this[buttonName].bottleStatus = res.result.bottleStatus;
    this[buttonName].bottleReason = res.result.bottleReason;
}

function getOperationStatus(statusName) {
    return (res.result.status === 2 && res.result.deptStatus[statusName] === 1) || res.result.deptStatus === 3;
}

function getAuditStatus(statusName) {
    return res.result.status === 2 && res.result.deptStatus[statusName] === 2;
}