小程序页面开发中的状态管理

                    <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mobile/css/edit_views_html-db03dd5f8c.min.css">
                    <h2>问题背景：</h2>

完成小程序订单详情界面的时候，要根据订单的状态以及订单的类型进行页面的区分。

完成方案一：

inStoreService=(status)=>{
    switch (status) {
      case SERVICE_ORDER_STATUS.SERVICE_ORDER_WAIT_PAY:
        return this.inStoreServiceWaitPay();
      case SERVICE_ORDER_STATUS.SERVICE_ORDER_WAIT_USE:
        return this.inStoreServiceWaitUse();
    }
  }
  doorToDoorService=(status)=>{
    switch (status) {
      case SERVICE_ORDER_STATUS.SERVICE_ORDER_WAIT_PAY:
        return this.doorToDoorServiceWaitPay();
      case SERVICE_ORDER_STATUS.SERVICE_ORDER_WAIT_USE:
        return this.doorToDoorServiceWaitUse();
    }
  }
renderServeContent=(addressType,status)=>{

switch (addressType) {

case ORDER_ADDRESS_TYPE.IN_STORE_SERVICE:

return this.inStoreService(status);

case ORDER_ADDRESS_TYPE.DOOR_TO_DOOR_SERVICE:

return this.doorToDoorService(status);

}

}

首先根据订单的类型区分为上门服务和到店服务

renderServeContent=(addressType,status)=>{
    switch (addressType) {
      case ORDER_ADDRESS_TYPE.IN_STORE_SERVICE:
        return this.inStoreService(status);
      case ORDER_ADDRESS_TYPE.DOOR_TO_DOOR_SERVICE:
        return this.doorToDoorService(status);
    }
  }

再根据订单状态进行进一步区分

inStoreService=(status)=>{
    switch (status) {
      case SERVICE_ORDER_STATUS.SERVICE_ORDER_WAIT_PAY:
        return this.inStoreServiceWaitPay();
      case SERVICE_ORDER_STATUS.SERVICE_ORDER_WAIT_USE:
        return this.inStoreServiceWaitUse();
    }
  }
  doorToDoorService=(status)=>{
    switch (status) {
      case SERVICE_ORDER_STATUS.SERVICE_ORDER_WAIT_PAY:
        return this.doorToDoorServiceWaitPay();
      case SERVICE_ORDER_STATUS.SERVICE_ORDER_WAIT_USE:
        return this.doorToDoorServiceWaitUse();
    }
  }

再渲染出对应的部分

  inStoreServiceFinished=()=>{
    const{items={}} = this.props;
    const {productQuantity,//数量
      productName,//名字
      productPic,//图片
      productPrice,//价格
    }=items;
    return(
      <View>
        <View className='serveContent_Item'>
          <View className='serveContent_Item_A'><Image src={productPic} className='img_card' /></View>
          <View className='serveContent_Item_B'>
            <View className='serveContent_Item_B_1'>{this.sliceString(productName)}</View>
            <View className='serveContent_Item_B_2'>数量{productQuantity}</View>
            <View style={{display:'flex'}}>
              <View className='serveContent_Item_B_3'>
                ￥{productPrice}
              </View>
        &lt;/View&gt;
      &lt;/View&gt;
    &lt;/View&gt;

    &lt;View className='order-card-footer-btns'&gt;
      &lt;View className='btn-one-more-order'&gt;
        再来一单
      &lt;/View&gt;
    &lt;/View&gt;

  &lt;/View&gt;
)

}

这样分步进行状态管理的坏处就是当新增了一个状态之后，需要修改多个函数，并且随着时间的推移，维护代码会变得更加困难。

完成方案二：

使用复合状态将两个状态封装起来，这样新增状态之后，只用改两个函数的代码就可以新增一个状态，维护起来更加清晰

parseServiceOrderStatus = (addressType,status) => {
    let compositeStatus = 0;
    switch (addressType){
      case ORDER_ADDRESS_TYPE.IN_STORE_SERVICE:
        switch (status){
          case SERVICE_ORDER_STATUS.SERVICE_ORDER_WAIT_PAY:
            compositeStatus = SERVICE_ORDER_COMPOSITE_STATUS.SERVICE_ORDER_WAIT_PAY_IN_STORE_SERVICE;
            break;
          case SERVICE_ORDER_STATUS.SERVICE_ORDER_WAIT_USE:
            compositeStatus = SERVICE_ORDER_COMPOSITE_STATUS.SERVICE_ORDER_WAIT_USE_IN_STORE_SERVICE;
            break;
          case SERVICE_ORDER_STATUS.SERVICE_ORDER_UNDER_SERVICE:
            compositeStatus = SERVICE_ORDER_COMPOSITE_STATUS.SERVICE_ORDER_UNDER_SERVICE;
            break;
          case SERVICE_ORDER_STATUS.SERVICE_ORDER_FINISHED:
            compositeStatus = SERVICE_ORDER_COMPOSITE_STATUS.SERVICE_ORDER_FINISHED_IN_STORE_SERVICE;
            break;
        }
        break;
      case ORDER_ADDRESS_TYPE.DOOR_TO_DOOR_SERVICE:
        switch (status){
          case SERVICE_ORDER_STATUS.SERVICE_ORDER_WAIT_PAY:
            compositeStatus = SERVICE_ORDER_COMPOSITE_STATUS.SERVICE_ORDER_WAIT_PAY_DOOR_TO_DOOR_SERVICE;
            break;
          case SERVICE_ORDER_STATUS.SERVICE_ORDER_WAIT_USE:
            compositeStatus = SERVICE_ORDER_COMPOSITE_STATUS.SERVICE_ORDER_WAIT_USE_DOOR_TO_DOOR_SERVICE;
            break;
          case SERVICE_ORDER_STATUS.SERVICE_ORDER_UNDER_SERVICE:
            compositeStatus = SERVICE_ORDER_COMPOSITE_STATUS.SERVICE_ORDER_UNDER_SERVICE;
            break;
          case SERVICE_ORDER_STATUS.SERVICE_ORDER_FINISHED:
            compositeStatus = SERVICE_ORDER_COMPOSITE_STATUS.SERVICE_ORDER_FINISHED_DOOR_TO_DOOR_SERVICE;
            break;
          case SERVICE_ORDER_STATUS.SERVICE_ORDER_AFTER_SALE:
            compositeStatus = SERVICE_ORDER_COMPOSITE_STATUS.SERVICE_ORDER_AFTER_SALE_DOOR_TO_DOOR_SERVICE;
            break;
        }
        break;
    }
    return compositeStatus;
  }
...
renderByCompositeStatus = (compositeStatus) => {

console.log("compositeStatus",compositeStatus);

switch (compositeStatus) {

case SERVICE_ORDER_COMPOSITE_STATUS.SERVICE_ORDER_WAIT_PAY_DOOR_TO_DOOR_SERVICE://上门服务 待付款

return this.doorToDoorServiceWaitPay();

case SERVICE_ORDER_COMPOSITE_STATUS.SERVICE_ORDER_WAIT_PAY_IN_STORE_SERVICE://到店服务 待付款

return this.inStoreServiceWaitPay();

case SERVICE_ORDER_COMPOSITE_STATUS.SERVICE_ORDER_WAIT_USE_DOOR_TO_DOOR_SERVICE://上门服务 待使用

return this.doorToDoorServiceWaitUse();

case SERVICE_ORDER_COMPOSITE_STATUS.SERVICE_ORDER_WAIT_USE_IN_STORE_SERVICE://到店服务 待使用

return this.inStoreServiceWaitUse();

case SERVICE_ORDER_COMPOSITE_STATUS.SERVICE_ORDER_UNDER_SERVICE://上门服务 服务中

return this.underService();

case SERVICE_ORDER_COMPOSITE_STATUS.SERVICE_ORDER_FINISHED_DOOR_TO_DOOR_SERVICE://上门服务 已完成

return this.doorToDoorServiceFinished();

case SERVICE_ORDER_COMPOSITE_STATUS.SERVICE_ORDER_FINISHED_IN_STORE_SERVICE://到店服务 已完成

return this.inStoreServiceFinished();

case SERVICE_ORDER_COMPOSITE_STATUS.SERVICE_ORDER_AFTER_SALE_DOOR_TO_DOOR_SERVICE://上门服务 售后

return this.doorToDoorServiceAfterSale();

case -1:

return null;

}

}

// 对应的复合状态
const SERVICE_ORDER_COMPOSITE_STATUS = {
  SERVICE_ORDER_WAIT_PAY_DOOR_TO_DOOR_SERVICE: 0,//订单状态为待使用，服务类型为上门服务
  SERVICE_ORDER_WAIT_PAY_IN_STORE_SERVICE: 1,//订单状态为待使用，服务类型为到店服务
  SERVICE_ORDER_WAIT_USE_DOOR_TO_DOOR_SERVICE: 2,//订单状态为待使用，服务类型为上门服务
  SERVICE_ORDER_WAIT_USE_IN_STORE_SERVICE: 3,//订单状态为待使用，服务类型为到店服务
  SERVICE_ORDER_UNDER_SERVICE: 4,//订单状态为服务中
  SERVICE_ORDER_FINISHED_IN_STORE_SERVICE:5,//订单状态为已完成，服务类型为上门服务
  SERVICE_ORDER_FINISHED_DOOR_TO_DOOR_SERVICE:6,//订单状态为已完成，服务类型为到店服务
  SERVICE_ORDER_AFTER_SALE_DOOR_TO_DOOR_SERVICE:7,//订单状态为售后，服务类型为上门服务
}

结语

这种封装状态，再根据不同的状态定义不同的行为的设计模式是状态模式，具体的可以看看菜鸟教程里的介绍或者其他大佬的博客。

这种设计模式简单来说，优点是利于扩展以及减少大量的条件语句，但缺点就是每次新增状态又要重新维护一遍代码。当状态过多时要慎用状态模式
状态模式 | 菜鸟教程 (runoob.com)

posted @ 2024-08-18 14:56 pop_world 阅读(66) 评论(0) 收藏举报来源

刷新页面返回顶部

lazy-Cworld

知不足而奋进，望山远而前行

小程序页面开发中的状态管理

完成方案一：

完成方案二：

结语

公告