职责链让树状分支更严谨更易读更易维护

业务场景
传统方式就不列举了
职责链解决

Chain 类

复制代码
class Chain {
  fn: Function;
  successor: any;
  constructor(fn: Function) {
    this.fn = fn;
    this.successor = null;
  }
  setNextSuccessor(successor: any) {
    return (this.successor = successor);
  }
  passRequest() {
    var ret = this.fn.apply(this, arguments);

    if (ret === 'nextSuccessor') {
      return (
        this.successor &&
        this.successor.passRequest.apply(this.successor, arguments)
      );
    }

    return ret;
  }
}

export default Chain;

使用职责链

复制代码
import { getProgress } from 'api';
import qs from 'qs';
import Chain from 'utils/chain';

export const useUrging = (route: any, next: any) => {
  if (route.path != '/home') {
    next();
    return;
  }
  const query = { ...route.query };
  if (!query.emp) {
    next();
    return;
  }
  // 接口异常
  const toHome = (res: any) => {
    if (res?.code == 22000) {
      return 'nextSuccessor';
    } else {
      delete query.emp;
      next(`/home?${qs.stringify(query)}`);
    }
  };
  // 未启用
  const toNotEnable = (res: any) => {
    if (res?.data?.employeeStatus == 10) {
      next('/account/noactivation');
    } else {
      return 'nextSuccessor';
    }
  };
  // 已激活
  const toActivated = (res: any) => {
    if (res?.data?.employeeStatus == 30) {
      next('/account/activation');
    } else if (res?.data?.employeeStatus == 20) {
      return 'nextSuccessor';
    }
  };
  // 未认证
  const toKyc = (res: any) => {
    if (res?.data?.userStatus == 10) {
      next('/kyc?emp=' + query.emp);
    } else {
      return 'nextSuccessor';
    }
  };
  // 认证失败
  const toKycResult = (res: any) => {
    if (res?.data?.userStatus == 30) {
      next('/kyc/result?emp=' + query.emp);
    } else if (res?.data?.userStatus == 40 || res?.data?.userStatus == 20) {
      return 'nextSuccessor';
    }
  };
  // 合同未签署
  const toContract = (res: any) => {
    if (res?.data?.contractStatus == 10) {
      next('/contract/contractpreview?emp=' + query.emp);
    } else {
      return 'nextSuccessor';
    }
  };
  // 无合同和已取消
  const toContractCancel = (res: any) => {
    if (res?.data?.contractStatus == -1 || res?.data?.contractStatus == 50) {
      next('/account/noactivation');
    } else if (res?.data?.contractStatus == 40) {
      return 'nextSuccessor';
    }
  };
  // 提现方式未配置
  const toAccountAddmode = (res: any) => {
    if (!res?.data?.withdrawWay) {
      next('/account/addmode?emp=' + query.emp);
    } else {
      return 'nextSuccessor';
    }
  };
  // 提现方式已经配置
  const toAccountModelist = (res: any) => {
    if (res?.data?.withdrawWay) {
      next('/account/modelist?emp=' + query.emp);
    } else {
      return 'nextSuccessor';
    }
  };

  const chainToHome = new Chain(toHome);
  const chainToNotEnable = new Chain(toNotEnable);
  const chainToActivated = new Chain(toActivated);
  const chainToKyc = new Chain(toKyc);
  const chainToKycResult = new Chain(toKycResult);
  const chainToContract = new Chain(toContract);
  const chainToContractCancel = new Chain(toContractCancel);
  const chainToAccountAddmode = new Chain(toAccountAddmode);
  const chainToAccountModelist = new Chain(toAccountModelist);

  chainToHome.setNextSuccessor(chainToNotEnable);
  chainToNotEnable.setNextSuccessor(chainToActivated);
  chainToActivated.setNextSuccessor(chainToKyc);
  chainToKyc.setNextSuccessor(chainToKycResult);
  chainToKycResult.setNextSuccessor(chainToContract);
  chainToContract.setNextSuccessor(chainToContractCancel);
  chainToContractCancel.setNextSuccessor(chainToAccountAddmode);
  chainToAccountAddmode.setNextSuccessor(chainToAccountModelist);

  getProgress({ emp: query.emp }).then((res: any) => {
    // @ts-ignore
    chainToHome.passRequest(res);
  });
};
如果签约状态新增个 无需签约 ,需要这样做

新增行为

复制代码
// 无需签约
 const toNotNeed = (res: any) => {
    if (res?.data?.contractStatus == 99) {
      // 行为
    } else {
      return 'nextSuccessor';
    }
  };
const chainToNotNeed = new Chain(toNotNeed);
chainToContract.setNextSuccessor(chainToNotNeed);
chainToNotNeed.setNextSuccessor(chainToContractCancel);

职责链没有顺序要求,但是我写法的原因,在处理上述问题时需要遵循硬顶的顺序。

相关推荐
油丶酸萝卜别吃19 分钟前
前端转全栈学习路线
前端·学习
浮生望33 分钟前
前端路由进阶:History API原理与手写HistoryRouter
前端
浮生望35 分钟前
React + TypeScript 项目架构实战:Model层与Api层的分离设计
typescript
陆枫Larry1 小时前
JavaScript 中的竞态是什么,为啥会有竟态?
前端
上海安当技术3 小时前
半天接入:USBKey RESTful API + C 动态库,Web 和 C/S 两套集成路径实战
前端·后端·restful·集成·usbkey
DevUI团队3 小时前
从“即兴创作”到“规格先行”,华为云码道(CodeArts)代码智能体持续深耕企业级规范驱动开发能力
前端·人工智能·后端
weixin_431600444 小时前
NestJS 入门(3):Guard 如何挡住未登录请求?
前端·后端·学习·nest.js
avi91114 小时前
[AI教做人]AI平台做2项目;一个3D模型展示,另一个框架多人
javascript·人工智能·ai·3d模型·3d引擎·顶点和法线
kyriewen5 小时前
我用Claude Code两天干完了团队两周的排期——周报发出去那一刻我就后悔了
前端·javascript·ai编程
IT_陈寒5 小时前
JavaScript类型转换把我坑惨了,这破玩意真该早点搞明白
前端·人工智能·后端