J*aScript状态模式_有限状态机实现_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

J*aScript状态模式_有限状态机实现

2025-11-20

浏览次数：次

返回列表

有限状态机（FSM）是一种描述对象在有限状态间转换的模型，包含状态、事件、转移和动作。通过J*aScript实现状态模式可管理如播放器的状态流转：定义状态类封装行为，上下文委托操作，实现清晰解耦。示例中播放器有idle、playing、paused三种状态，支持play、pause、stop操作，状态切换逻辑隔离，符合开闭原则。还可扩展为通用FSM类，通过配置定义初始状态和转移规则，提升复用性与可维护性，适用于订单、登录等场景。

javascript状态模式_有限状态机实现

状态模式是一种行为设计模式，适用于对象的行为依赖于其内部状态，并且在运行时根据状态改变行为的场景。结合有限状态机（Finite State Machine, FSM）的思想，使用 J*aScript 实现状态模式可以清晰地管理复杂的状态流转逻辑，比如订单流程、用户登录状态、游戏角色行为等。

什么是有限状态机（FSM）

有限状态机是一种数学模型，用来描述对象在有限个状态之间转换的过程。一个 FSM 通常包含：

状态（States）：对象可能处于的明确状态，如 "空闲"、"运行"、"暂停"
事件（Events）：触发状态转换的动作，如 "开始"、"停止"
转移（Transitions）：定义在某个状态下接收到某个事件后，应切换到哪个新状态
动作（Actions）：状态进入或退出时执行的逻辑

用 J*aScript 实现状态模式 + FSM

我们通过一个简单的播放器示例来实现：播放器有三种状态 —— 待机（idle）、播放（playing）、暂停（paused），支持“播放”、“暂停”、“停止”三个操作。

核心思路是：

每个状态封装自己的行为
上下文对象（播放器）持有当前状态，并将操作委托给当前状态对象处理
状态之间通过预定义规则进行切换

// 状态接口（约定方法）
class PlayerState {
  play(player) { throw new Error('Not implemented'); }
  pause(player) { throw new Error('Not implemented'); }
  stop(player) { throw new Error('Not implemented'); }
}

// 待机状态
class IdleState extends PlayerState {
  play(player) {
    console.log('开始播放');
    player.setState(new PlayingState());
  }
  pause(player) {
    console.log('无法暂停，当前未播放');
  }
  stop(player) {
    console.log('已经停止');
  }
}

// 播放状态
class PlayingState extends PlayerState {
  play(player) {
    console.log('已经在播放');
  }
  pause(player) {
    console.log('暂停播放');
    player.setState(new PausedState());
  }
  stop(player) {
    console.log('停止播放');
    player.setState(new IdleState());
  }
}

// 暂停状态
class PausedState extends PlayerState {
  play(player) {
    console.log('恢复播放');
    player.setState(new PlayingState());
  }
  pause(player) {
    console.log('已经是暂停状态');
  }
  stop(player) {
    console.log('停止播放');
    player.setState(new IdleState());
  }
}

// 上下文：播放器
class AudioPlayer {
  constructor() {
    this.state = new IdleState();
  }

  setState(state) {
    this.state = state;
  }

  play() {
    this.state.play(this);
  }

  pause() {
    this.state.pause(this);
  }

  stop() {
    this.state.stop(this);
  }
}

使用示例

const player = new AudioPlayer();

player.play();  // 输出：开始播放
player.pause(); // 输出：暂停播放
player.play();  // 输出：恢复播放
player.stop();  // 输出：停止播放
player.pause(); // 输出：无法暂停，当前未播放

这种结构让状态逻辑彼此隔离，新增状态或修改转移规则不会影响其他状态，符合开闭原则。

奥硕企业网站管理系统3.0.2

临沂奥硕软件有限公司拥有国内一流的企业网站管理系统，奥硕企业网站管理系统真正会打字就会建站的管理系统，其强大的扩展性可以满足企业网站实现各种功能（唯一集成3O多套模版的企业建站系统）奥硕企业网站管理系统具有一下特色功能1、双语双模（中英文采用单独模板设计，可制作中英文不同样式的网站）2、在线编辑JS动态菜单支持下拉效果，同时生成中文，英文，静态3个JS菜单3、在线制作并调用FLASH展示动画4、自

0 查看详情奥硕企业网站管理系统3.0.2

扩展为通用有限状态机

如果多个模块都需要状态机，可以封装一个通用 FSM 类，通过配置定义状态和转移规则。

class FiniteStateMachine {
  constructor(config) {
    this.currentState = config.initial;
    this.transitions = config.transitions || {};
  }

  transition(event) {
    const nextState = this.transitions[this.currentState]?.[event];
    if (nextState) {
      this.currentState = nextState;
      console.log(`状态切换为: ${this.currentState} (通过事件: ${event})`);
    } else {
      console.warn(`不允许的转换: ${this.currentState} + ${event}`);
    }
  }

  getCurrentState() {
    return this.currentState;
  }
}

// 使用配置定义播放器 FSM
const playerFSM = new FiniteStateMachine({
  initial: 'idle',
  transitions: {
    idle:    { play: 'playing' },
    playing: { pause: 'paused', stop: 'idle' },
    paused:  { play: 'playing', stop: 'idle' }
  }
});

playerFSM.getCurrentState(); // 'idle'
playerFSM.transition('play'); // 状态切换为: playing
playerFSM.transition('pause'); // 状态切换为: paused

这种方式更轻量，适合简单状态流转，也易于序列化和调试。

基本上就这些。状态模式配合 FSM 能有效解耦复杂条件判断，提升代码可维护性。根据项目需求选择面向对象的状态类实现，还是配置化的 FSM，都能显著改善状态管理逻辑。不复杂但容易忽略的是状态完整性与非法转移的处理，建议在生产中加入校验和日志。

以上就是J*aScript状态模式_有限状态机实现的详细内容，更多请关注其它相关文章！

# 自己的 # 山西seo推广咨询 # 南宁网站如何做好推广 # 淮安网站制作建设 # 黄山seo排名方法大全 # seo软件优化霸屏 # 徐州网站建设范范 # 万州网站建设高端团队 # 企业网站如何进行排名优化 # 上饶抖音关键词排名 # 刷手机网站优化 # 的是 # 状态模式 # 如何用 # 适用于 # 面向对象 # 如何实现 # 是一种 # 企业网站 # 播放器 # 管理系统 # mac # java # javascript