React开发-使用抽象+工厂实现状态机

日常开发遇到的一些问题？

大量的if else
大量的switch case
代码阅读性差，扩展性差
代码耦合性强，复用率低

痛点

以电商平台订单状态的流转为例

image

从图中可以看到不同的订单状态对应不同的操作按钮，在代码中实现(伪代码)

if (status === '待付款'){
    btns = ['取消订单','去付款'];
}else if (status === '待发货'){
    ...
}

或者使用switch case

switch (status){
    case '待付款':
        btns = ['取消订单','去付款'];
        break;
    .
    .
    .
}

从上述代码中可以看到，订单状态的一些判断与业务代码掺杂在一块，不利于我们做扩展和复用

思考&实现

使用对象来管理不同状态下的UI展示效果
比如：在是否需要展示操作按钮的时候

status.canCancel() ? <button  /> ... // 是否需要取消订单的按钮
status.canGoPay() ? <button /> ...  // 是否需要去付款的按钮

从上述代码中可以看到，status是代表了不同订单状态的一个对象，我们应该根据后端返回的状态字段创建不同的status对象

// 根据状态创建不同的状态类(伪代码)
createStatusObjWith (status) {
    let obj = undifined
    switch (status) {
        case '待付款':
            obj = new StatusWaitToPay()
            break;
        case '待发货':
            obj = new StatusWaitToShip()
            break;
            ...
    }
    return obj
}

// 在状态类中设置UI的一些操作
class StatusWaitToPay {
    canCancel () {
        return true
    }
    canGoPay () {
        return true
    }
}

接下来完善一下代码

// 抽象类，用来规定订单状态需要实现的方法
export default class OrderAbstractStatus {
    constructor(type) {
        this.type = type
    }
    // 是否支持取消订单操作
    canCancel () {
        throw new Error("抽象方法，请不要直接调用")
    }
    // 是否支持去付款的操作
    canGoPay () {
        throw new Error("抽象方法，请不要直接调用")
    }
}
// 待付款状态类
export default class StatusWaitToPay {
    constructor() {
       super(1) // 假设待付款订单的status值为 1
    }
    canCancel () {
        return true
    }
    canGoPay () {
        return true
    }
}

// 使用工厂类 完成状态类的创建操作
export default class OrderStatusFactory {
    createStatusObjWith (status) {
        let obj = undifined
        switch (status) {
            case '待付款':
                obj = new StatusWaitToPay()
                break;
            case '待发货':
                obj = new StatusWaitToShip()
                break;
            ...
    }
    return obj
}

接下来看如何使用

// 网络请求成功后数据的处理
dealRemoteData (data) {
    let orderStatusFactory = new OrderStatusFactory()
    let status = orderStatusFactory.createStatusObjWith(data.status)
    this.setState({ status: status })
    ...
}

以上是解决问题的一种思路，欢迎大家的建议&讨论