用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 或框架路由方法，让浏览器地址同步变化：
立即学习“Java免费学习笔记（深入）”；
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();
}
});
增强健壮性的小技巧
- 用
JSON.stringify([state, action])当 key，避免字符串拼接冲突（如'a:b'和'ab:c'） - 添加
onEnter/onExit钩子，在状态变更前后统一处理副作用（如清表单、埋点） - 配合
window.onpopstate监听浏览器后退，反向触发transition（需维护逆向映射或约定命名）
