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

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

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);

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

相关推荐
QQ1__8115175156 小时前
Spring boot名城小区物业管理系统信息管理系统源码-SpringBoot后端+Vue前端+MySQL【可直接运行】
前端·vue.js·spring boot
钛态6 小时前
前端微前端架构:大项目的救命稻草还是自找麻烦?
前端·vue·react·web
一粒黑子6 小时前
【实战解析】阿里开源 PageAgent:纯前端 GUI Agent,一行JS让网页支持自然语言操控
前端·javascript·开源
独角鲸网络安全实验室6 小时前
2026微信小程序抓包全解析:从实操落地到合规风控,解锁前端调试新范式
前端·微信小程序·小程序·抓包·系统代理绕过·https证书严格校验·进程隔离
紫微AI6 小时前
前端文本测量成了卡死一切创新的最后瓶颈,pretext实现突破了
前端·人工智能·typescript
GISer_Jing6 小时前
AI前端(From豆包)
前端·aigc·ai编程
IT枫斗者6 小时前
前端部署后如何判断“页面是不是最新”?一套可落地的版本检测方案(适配 Vite/Vue/React/任意 SPA)
前端·javascript·vue.js·react.js·架构·bug
测试修炼手册6 小时前
[测试技术] 深入理解 JSON Web Token (JWT)
前端·json
AI老李6 小时前
2026 年 Web 前端开发的 8 个趋势!
前端
里欧跑得慢6 小时前
15. Web可访问性最佳实践:让每个用户都能平等访问
前端·css·flutter·web