函数式状态机_JavaScript状态模式-js教程-PHP中文网

函数式状态机_JavaScript状态模式

紅蓮之龍

发布： 2025-11-24 20:11:02

原创

360人浏览过

函数式状态机将状态定义为纯函数，通过返回新函数实现状态转移。例如灯开关示例中，offState与onState根据输入事件切换状态，无需类或实例，仅靠函数引用传递；订单状态机则通过createOrderMachine接收上下文，各状态函数闭包捕获数据，在保持不可变性的同时完成逻辑流转。该模式适用于表单、UI交互等场景，优势在于无副作用、易测试、与函数式框架契合，适合中小型状态管理，复杂场景可结合xstate等库。核心是将状态作为一等公民，用函数表达行为与转换。

函数式状态机_javascript状态模式

状态模式在JavaScript中可以用函数式的方式实现，既保持了状态机的清晰结构，又避免了类和实例带来的复杂性。核心思路是把每个状态定义为一个纯函数，状态之间的切换通过返回新的状态函数完成。

什么是函数式状态机

函数式状态机将状态表示为函数，每个状态函数接收事件或输入，根据规则决定是否转移到下一个状态，并执行对应的行为。与面向对象的状态模式不同，它不依赖this或实例属性，而是通过闭包或函数返回值管理状态流转。

这种方式适合处理表单流程、UI交互、游戏角色行为等需要明确状态边界和转换逻辑的场景。

用纯函数实现状态流转

每个状态是一个函数，接受当前上下文（如数据或事件），返回下一个状态函数。整个状态机通过递归调用维持运行。

立即学习“Java免费学习笔记（深入）”；

例如，一个简单的灯开关状态机：

const offState = (input) => {
  if (input === 'toggle') {
    console.log('开灯');
    return onState;
  }
  return offState;
};

const onState = (input) => {
  if (input === 'toggle') {
    console.log('关灯');
    return offState;
  }
  return onState;
};

// 初始状态
let currentState = offState;

// 模拟事件触发
currentState = currentState('toggle'); // 开灯
currentState = currentState('toggle'); // 关灯

登录后复制

这里没有类、没有变量保存状态，状态本身由函数引用表示，转移通过返回新函数完成。

结合数据上下文增强灵活性

实际应用中，状态可能依赖外部数据。可以通过传入上下文对象让状态函数访问必要信息，同时保持函数式风格。

MDWechat微信主题模块

MDWechat是一款xposed插件,能够使使微信Material Design化。功能实现的功能有:1.主界面 TabLayout Material 化,支持自定义图标2.主界面 4 个页面背景修改3.全局 ActionBar 和状态栏颜色修改,支持主界面和聊天页面的沉浸主题(4.0新增)4.自动识别微信深色模式以调整MDwechat配色方案(3.6新增)5.主界面添加悬浮按钮(Float

查看详情

比如一个订单状态机：

const createOrderMachine = (context) => {
  const pending = (event) => {
    if (event.type === 'PAY') {
      console.log('支付成功');
      context.lastUpdate = Date.now();
      return shipped(context);
    }
    return pending;
  };

  const shipped = (ctx) => (event) => {
    if (event.type === 'DELIVER') {
      console.log('已送达');
      ctx.status = 'delivered';
      return delivered(ctx);
    }
    return shipped(ctx);
  };

  const delivered = () => () => {
    console.log('订单已完成，不可变更');
    return delivered;
  };

  return { state: pending, context };
};

登录后复制

使用方式：

const order = createOrderMachine({ status: 'pending' });
let machine = order.state;

machine = machine({ type: 'PAY' });     // 支付成功
machine = machine({ type: 'DELIVER' }); // 已送达

登录后复制

状态函数可以捕获上下文，行为更灵活，同时避免了可变状态污染。