JavaScript 中怎么利用 Map 实现简单的状态机路由跳转-js教程-PHP中文网

用Map实现状态机式路由跳转，核心是将“当前状态+触发动作”映射为“下一个状态+执行逻辑”，适用于表单向导、权限流转等有状态依赖的流程控制场景。

javascript 中怎么利用 map 实现简单的状态机路由跳转

用 Map 实现状态机式路由跳转，核心是把“当前状态 + 触发动作”映射到“下一个状态 + 执行逻辑”，而不是直接映射 URL。它适合流程控制明确、有状态依赖的场景（比如表单向导、权限流转、多步审批）。

设计状态转移表（Map）

用 Map 存储键为 [currentState, action] 的元组（用字符串拼接或 Symbol 作 key），值为 { nextState, handler } 对象：

const routeMachine = new Map();

// [当前状态, 动作] → { 下一个状态, 处理函数 }
routeMachine.set('idle:next', { nextState: 'step1', handler: () => console.log('进入第一步') });
routeMachine.set('step1:next', { nextState: 'step2', handler: () => console.log('进入第二步') });
routeMachine.set('step1:back', { nextState: 'idle', handler: () => console.log('返回初始页') });
routeMachine.set('step2:back', { nextState: 'step1', handler: () => console.log('返回上一步') });
routeMachine.set('step2:submit', { nextState: 'done', handler: () => alert('提交成功！') });

封装跳转执行器

写一个 transition 函数，接收当前状态和动作，查表、执行 handler、更新状态：

Java 接口排错助手

在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。

下载

let currentState = 'idle';

function transition(action) {
  const key = `${currentState}:${action}`;
  const rule = routeMachine.get(key);

  if (!rule) {
    console.warn(`未定义转移: ${key}`);
    return false;
  }

  // 执行业务逻辑
  rule.handler?.();

  // 更新状态
  currentState = rule.nextState;
  return true;
}

// 使用示例
transition('next');   // → 进入第一步，currentState = 'step1'
transition('next');   // → 进入第二步，currentState = 'step2'
transition('back');   // → 返回上一步，currentState = 'step1'

结合实际路由（如 History API）

在 handler 中调用 history.pushState 或框架路由方法，让浏览器地址同步变化：

routeMachine.set('step1:next', {
  nextState: 'step2',
  handler: () => {
    history.pushState({ step: 'step2' }, '', '/form/step2');
    renderStep2(); // 视图更新逻辑
  }
});

routeMachine.set('step2:back', {
  nextState: 'step1',
  handler: () => {
    history.pushState({ step: 'step1' }, '', '/form/step1');
    renderStep1();
  }
});