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

Posted 2021-04-25 Geek 常先生

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

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

痛点

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

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

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 }) ...}

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