用 Typescript 写个状态机

最新推荐文章于 2024-08-24 07:42:55 发布
最新推荐文章于 2024-08-24 07:42:55 发布
阅读量2.7k 收藏 15
点赞数 4
分类专栏： 小技巧
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/womendeaiwoming/article/details/103007835
版权

有限状态机，是常用的一种编程范式。游戏领域和编译器领域等工作的小伙伴，应该很常用的了。如果不熟悉，那咱们先来看看状态机是什么。

状态机

假设有这样一个需求

在介绍状态机之前，假设有这样一个需求：咱们在开发一款打斗类游戏，游戏里有一个主角，咱们要通过键盘控制主角的行为。主角可以站立、蹲着、跳跃，这些行为的流程如下：

英雄行为

总结一下：

  1. 通过键盘按钮主角的行为；
  2. 主角的行为包括：站立、蹲着、跳跃；
  3. 站立(按S) -> 蹲着；蹲着(按空格) -> 站立；
  4. 站立(按空格) -> 跳跃；跳跃 -> 站立；

很明显，“蹲着” 不能直接到 “跳跃”。

接下来，按照一般的思路，实现这个需求：

class Hero {
    isStand = false;   // 是否是站立
    isKneel = false;   // 是否是蹲着
    isLeap = false;    // 是否在空中

    handleInput(event: any) {
        if (event == 'S') { // 按下 'S' 键
            if (this.isStand) {   // 如果是站立，则蹲下
                this.toKneel();
            }
        } else if (event == 'Space') { // 按下 ‘空格’ 锋
            if (this.isStand) {    // 如果是站立，则跳起
                this.jump();
            } else if (this.isKneel) {  // 如果是蹲着，则站起
                this.standup();
            }
        } else if (event == 'down') { // 下落事件
            if (this.isLeap) {  // 如果在空中，则站起
                this.land();
            }
        }
    }

    toKneel() {
        // ... 蹲下
        this.isStand = false;
        this.isKneel = true;
    }

    jump() {
        // ... 跳起来
        this.isStand = false;
        this.isLeap = true;
    }

    standup() {
        // ... 站起来
        this.isStand = true;
        this.isKneel = false;
    }

    land() {
        // ... 落地
        this.isStand = true;
        this.isLeap = false;
    }
}

上面的代码中，我们使用 isXXX 变量来标识是当前的状态。在输入事件处理方法中，根据 状态 和 event 调用相应的方法。

现在一切都很完美，可以泡杯绿茶好好享受一下了。

但还没喝到五分钟，产品小姐姐跑到你的身边，“为了不使英雄这么单调，我给他加了些需求。包括行走、跑、二段跳、三段跳”，小姐姐看着你甜甜地说道。于是只好将手中杯子放下，敲起了键盘。

现在新增了四个行为：“行走、跑、二段跳、三段跳”

咱们如下实现：

class Hero {
    isStand = false;   // 是否是站立
    isKneel = false;   // 是否是蹲着
    isLeap = false;    // 是否在空中
    isWalking = false; // 是否在行走
    isRunning = false; // 是否在跑
    isLeapTwo = false; // 是否是二段跳
    isLeapThree = false; // 是否是三段跳

    handleInput(event: any) {
        if (event == 'S') {
            if (this.isStand) {
                this.toKneel();
            }
        } else if (event == 'DA' || event == 'DD') { // 按下 A 或 D 键
            if (this.isStand) {
                this.toWalk();  // 如果站立，则行走
            } else if (this.isWalking) {
                this.toRunning();  // 如果正在跑，则行走
            }
        } else if (event == 'UA' || event == 'UD') { // 松开 A 或 D 键
            if (this.isWalking || this.isRunning) {
                this.standup();   // 如果是正在行走 或 跑，则到站立
            }
        }  else if (event == 'Space') {
            if (this.isStand) {
                this.jump();
            } else if (this.isLeap && !this.isLeapTwo && !this.isLeapThree) {
                this.toLeapTwo(); // 如果正在空中，则进入二段跳
            } else if (this.isLeapTwo) {
                this.toLeapThree(); // 如果正在二段跳，则进入三段跳
            } else if (this.isKneel) {
                this.standup();
            }
        } else if (event == 'down') { // 下落事件
            if (this.isLeap || this.isLeapTwo || this.isLeapThree) {
                this.land();
            }
        }
    }
    
    ......
}

代码写到一半，小姐姐又过来了：“要给英雄加上技能，有的技能要在站着时才能放，有的要在空中才能放，还有的技能要续能…”。想想这些需求吧，如果我们继续按照上面的代码那样处理，代码会是一个什么样的状况？无数的状态变量，深得可怕的分支，一大堆的 bug …

用状态机实现这个需求

状态机适合处理这种多状态的需求。可以用 enum 将各状态定义出来，再使用根据这些状态来进行处理：

enum EHeroStatus {
    Stand,
    Kneel,
    Walking,
    Running,
    Leap,
    LeapTwo,
    LeapThree,
}

上面的代码将英雄的状态都用枚举列出来了，现在根据这些状态再来看看处理的代码：

class Hero {
    status: EHeroStatus;

    handleInput(event: any) {
        if (this.status == EHeroStatus.Stand) {
            if (event == 'S') {
                this.toKneel();
            } else if (event == 'DA' || event == 'DD') {
                this.toWalk();
            } else if (event == 'Space') {
                this.jump();
            }
        } else ...
    }
}

这里将各类状态分开，再处理各类输入的事件。

别看这里改动不大，但成功地将复杂度降低了不少，再每一个状态中，只需简单考虑事件与下一个状态的转换关系即可。当然，这里可以将状态封装成类：

interface HeroState {
    handInput(hero: Hero, input: Input): void;
}

class StandState implements HeroState {
    handInput(hero: Hero, input: Input) {
        if (input == 'S') {
            hero.toState(new KneelState());
        } else if (input == 'DA' || input == 'DD') {
            hero.toState(new WalkState());
        } else if (input == 'Space') {
            hero.toState(new SpaceState());
        }
    }
}

class KneelState implements HeroState ...

class Hero {
    private state: HeroState;

    handleInput(input: Input) {
        this.state.handInput(this, input);
    }
    
    toState(state: HeroState) {
        this.state = state;
    }
}

上面的代码中，Hero 类的 handleInput 方法清晰明了，内部的逻辑已经封装到那些状态类内部了。

以上，就是一个简单的状态机了。

Typescript 实现

Typescript 是一门像极了 Java 的动态语言，可它本质上，还是 Javascript。在写这个状态机库之前，我们先整理一下需求，即想好库应该写成什么样子：

  1. 先定个名字。嗯，就叫 StateMachine 吧；
  2. 抽象状态。上面第二种状态机代码实现中，将每一种状态都抽象成类，这样处理，会将 状态 与 逻辑 完全耦合在一起，难以复用。所以将 状态 抽象出来；
  3. 抽象状态转换时的行为。上面第一种状态机代码实现中，就是将状态定义为枚举，但在其业务逻辑却混在一起，所以需要将这一部分抽象出来；
  4. 状态转换验证。状态间的转换是有一定规则的，比如二段跳状态，其前置状态必定是跳跃状态，所以需要有一个验证机制；
  5. ‘*’ 支持。有时不希望转换被前置条件限制，比如：重置功能。

1. State

状态。在咱们这里，不需要做任何限制，直接以模板参数表示即可。

2. Transition

状态机，主要在于状态之间的转换。首先，我们将状态间的转换抽象出来。把 状态转换 定义为 Transition。转换的数据成员包括：来源状态（即上一个状态）、去向（转换后的状态），再加一个转换触发时的回调，这样就提供给外部进行逻辑处理的机会。

/** 状态转换描述接口 */
interface ITransitionDir<State> {
    /** 来源状态，可以是 1 到 N 状态，'*' 表示任何状态 */
    from: State | State[] | '*';
    /** 转换后的目标状态 */
    to: State;
    /** 转换触发时的回调 */
    onTransition?: (from: State, to: State) => void;
}

为了表示方便，可以导出一个构建函数：

export function BuildTransition<State>(from: State | State[] | '*', to: State, onTransition?: (from: State, to: State) => void): ITransitionDir<State> {
    return {from, to, onTransition};
}

3. 初始化条件

这些条件是需要由用户提供的。基本条件有两个：

  1. 初始状态；
  2. 转换对象。

用代码示例为：

interface STOptions<State> {
    init: State;
    transitions: {
        transName1: ITransitionDir<State>;
        transName2: ITransitionDir<State>;
        ...
    }
}

实际上，这些数据描述了状态机的数据的流向。我们的在此要实现的状态机代码本质上是对这些数据的自驱动。上面的这个接口有一个问题：transitions 对象里的 keys ，即状态转换的名字应该是由用户定义的，如上面的代码直接给出名字，明显不合理。还好 typescript 的模版功能非常强大，它能将某个对象里所有已知的属性名展开：

type IDemo<T> = {
    [P in keyof T]: string;
}

这里的代码意思就是将 T 中的属性依次取出，并且其类型为 string。如：

interface IA {
    a: number;
    b: string;
    c: () => void;
}

let b: IDemo<IA>;

此时变量 b 的类型是：

inetface TypeB {
    a: string;
    b: string;
    c: string;
}

利用这个方便的特性，我们再定义一次 STOptions ：

type ITransitions<T, State> = {
    [P in keyof T]: ITransitionDir<State> | ITransitionDir<State>[];
}

interface STOptions<T, State> {
    init: State;
    transitions: ITransitions<T, State>;
}

4. 定义类

现在可以定义类了，先利用已经的信息将框架定义出来：

export class StateMachine<T, State> {

    constructor(option: STOptions<T, State>) {
    }
}

那咱们应该如何来进行状态转换呢？最方便的当然是使用用户自己定义的名字啦，我们可以再使用上面那个套路：

type TransitionCall<T> = {
    [P in keyof T]: () => void;
};

export class StateMachine<T, State> {
    private _transitions: TransitionCall<T>;
    private _curState: State;
    private _originTransitions: ITransitions<T, State>;

    constructor(option: STOptions<T, State>) {
        const {init, transitions} = option;

        this._curState = init;
        
        this.setupTransitions(transitions);
    }
    
    private setupTransitions(transitions: ITransitions<T, State>) {
        this._originTransitions = transitions;
        this._transitions = {} as any;

        Object.keys(transitions).forEach(k => {
            const key = k as keyof T;

            const value: ITransitionDir<State> | ITransitionDir<State>[] = transitions[key];

            this._transitions[key] = (() => {
                //进行状态转换
                ...
            });
        });
    }


    transition() {
        return this._transitions;
    }
}

现在可以这么用了：


enum EQiuActionStatus {
    None = 'None',
    PreAction = 'PreAction',
    MyTurn = 'MyTurn',
    Standup = 'Standup',
};

const option = {
    init: EQiuActionStatus.None,
    transitions: {
        step: [
            BuildTransition(EQiuActionStatus.None, EQiuActionStatus.PreAction),
            BuildTransition(EQiuActionStatus.PreAction, EQiuActionStatus.MyTurn),
            BuildTransition(EQiuActionStatus.MyTurn, EQiuActionStatus.Standup),
            BuildTransition(EQiuActionStatus.Standup, EQiuActionStatus.None),
        ],
        reset: BuildTransition('*', EQiuActionStatus.None, (from, to) => console.log(from, to)),
    }
};

const fsm = new StateMachine(option);
fsm.transition().step();
fsm.transition().reset();

现在来给这个类添砖加瓦：

一. 需要能获取到当前的状态：

export class StateMachine<T, State> {
    ...
    /** 获取当前状态 */
    state() {
        return this._curState;
    }
    ....
}

二. 状态转换是有前提的，所以需要一个方法，判断能不能进行转换：

export class StateMachine<T, State> {
    ...
    /** 是否可以进行 `t` 转换 */
    can(t: keyof T) {
        ...
    }
    ....
}

三. 还需要状态转换前、后、错误回调：

export class StateMachine<T, State> {
    ...
    onBefore?: (from: State, to: State) => void;
    onAfter?: (from: State, to: State) => void;
    onError?: (code: number, reason: string) => void;
    ....
}

上面代码的基本框架都已准备好，细节可以自行实现。想偷懒可以看这里：https://github.com/NathanLi/typescript-state-machine

完结

首先我们简单介绍了状态机，接下来使用 typescript 进行可用的简单实现。当然状态机远不止于此，比如有的开发者们，为了方便自己或产品同事们，还会自己写一套可视化、可配置的状态机工具。

听榆大叔
关注
专栏目录
state:用于TypeScript和JavaScript的分层有限状态机
04-11
状态 用于TypeScript和JavaScript的可执行有限状态机。 如果您喜欢@ steelbreeze / state，请给它加注星标... 注意： v8现在可以使用，并且包含重大更改，但是可以进一步简化代码库的性能。 有关更多信息，请参见。 警告： v8尚不包含对序列化的任何支持，这是由于引入了延迟事件而带来的挑战，这些延迟事件与活动状态配置一起在状态机实例中缓存。 安装 npm i @steelbreeze/state 用法 该API分为两个不同的部分： 一组代表状态机模型的类（ ， ， 等）； 一个类，用于在运行时管理状态机实例的活动状态配置（ ）。 它们一起使能同一状态机模型的多个实例。 完整的API参考可以在找到。 打字稿 import * as state from "@steelbreeze/state" ; // create event cla
TypeScript实现一个有限状态机
qq_40648045的博客
08-06 1313
开放封闭原则： 开发过程中，因为变化、升级和维护等原因需要对原有逻辑进行修改时，很有可能会给旧代码中引入错误，也可能会使我们不得不对整个功能进行重构，并且需要原有功能新测试。 我们应该尽量通过扩展实体的行为来实现变化，而不是通过修改已有的代码来实现变化 具体一点呢 —— 类、模块和函数应该对扩展开放，对修改关闭。模块应该尽量在不修改原代码的情况下进行扩展。 核心 —— 用抽象构建框架，用实现扩展细节。 总结一下 —— 开发人员应该对程序中呈现的频繁变化的那些部分作出抽象，然后从抽象派生的实现类来
TypeScript FSM 开源项目教程
最新发布
gitblog_00646的博客
08-24 438
TypeScript FSM 开源项目教程 typescript-fsmTS-FSM is a strongly typed finite state machine for TypeScript that is using async operations. Library uses generics to take the user states and events. Zero depen...
探索TypeScript的魔力：typescript-fsm，轻量级状态机解决方案
gitblog_00074的博客
06-14 305
探索TypeScript的魔力：typescript-fsm，轻量级状态机解决方案 typescript-fsmTS-FSM is a strongly typed finite state machine for TypeScript that is using async operations. Library uses generics to take the user states an...
StateMachine:SSM 的 TypeScript 版本（更少的魔法）
06-19
状态机： 状态机 用法： // create instance var machine = new StateMachine . StateMachine ( { verbose : true , name : "MyStateMachine" } ) ; // define states machine . state ( "state1" ) . on ( "event1" , function ( ) { // do something this . go ( "state2" ) ; } ) . on ( "event2" , function ( x , y , z ) { // do something console . log ( "x:" , x , "y:" , y , "z:" , z ) ; } )
100行代码写一个简单的有限状态机
ansong888的博客
02-15 646
先介绍下有限状态机。考虑在一个类似《刀塔传奇》的横版动作卡牌游戏的战斗里，每个英雄有出场、站立、走位、受击、吟唱、施法等状态。英雄每时每刻只能处在这些状态中其中一个状态，每个状态都有自己的逻辑，状态的改变都由事件驱动。像这样简单的AI，可以使用有限状态机来实现。 有限状态机包括几个要素： 1.状态，状态机同时只能处于一个状态，在指定状态下有相应的逻辑，例如行走状态，播放行走动画，每帧修改英雄的x、y值 2.事件，事件是状态转变的触发器，包括内部事件和外部事件。例如最近的敌人达到攻击距离，触发从行走状态
StateJS.ts Cocos Creator状态机，单机多人
08-11
使用例子参考Creator官方21点项目
分层状态机ts版.rar
05-24
- 使用 TypeScript 实现状态机，可以确保类型安全，减少运行时错误，并为代码提供更好的文档和工具支持。 3. **分层状态机**： - 分层状态机是状态机的一种变体，将复杂的状态空间分解为多个层次，每个层次代表一...
phaser-typescript-seed：一个简单的Phaser + Typescript入门工具包开始
02-04
Phaser是一个广泛使用的JavaScript游戏开发框架，而TypeScript是JavaScript的一个超集，提供了静态类型检查和现代化的开发功能。这个“phaser-typescript-seed”项目是一个基础模板，旨在帮助开发者快速入门Phaser...
React-Native-TypeScript:React本机课程
04-16
在本课程"React-Native-TypeScript:React本机课程"中，我们将深入探讨如何使用React Native结合TypeScript来构建跨平台的原生移动应用。React Native是Facebook开发的一个开源框架，它允许开发者使用JavaScript和...
策略模式-23种设计模式
Jayce的博客
09-09 185
类型：【行为型】 类图： 描述： 策略模式是定义一组算法，将每个算法都封装起来，并且使它们之间可以相互转换。 特点： 优点： 算法可以随意切换 避免使用多重条件判断 拓展性良好 缺点： 策略数量增多 所有策略类都需要对外暴露。违背迪米特法则，只用用单个策略，为何要理解整个策略，这就失去了封装的意义，因此，可以通过其他模式完善，eg:工厂模式、代理模式或享元模...
ts-ecs:用于TypeScript的实验性ECS框架
03-27
ts-ecs 用于TypeScript的实验性ECS框架。 安装 npm install @jahed/ts-ecs 用法 将来可能会提供一个完整的示例。 现在，这是一个简单的例子。 /* * Component Definitions are used to create and find components */ export const withPosition = defineComponent ( 'Position' , ( position : Position ) : Position => position ) export const withRadius = defineComponent ( 'Radius' , ( radius : number ) : number => radius ) /* * Systems are used
TypeScript设计模式之职责链、状态
weixin_30590285的博客
03-13 131
看看用TypeScript怎样实现常见的设计模式，顺便复习一下。 学模式最重要的不是记UML，而是知道什么模式可以解决什么样的问题，在做项目时碰到问题可以想到用哪个模式可以解决，UML忘了可以查，思想记住就好。 这里尽量用原创的，实际中能碰到的例子来说明模式的特点和用处。 职责链模式 Chain of Responsibility 特点：可以让一个请求被不同的对象处理多次，请求像经过管道...
Rust类型状态机（typestate）
归去来兮的博客
03-03 2246
翻译来源 https://yoric.github.io/post/rust-typestate/ 内容 很久以前，Rust语言是一种带有typestate的语言。官方称，类型状态早在Rust 1.0之前就已经被抛弃了。 在这篇文章中，我会告诉你Rust社区最糟糕的秘密：Rust仍然有typestate。 什么是typestate 考虑一个表示文件的对象 - MyFile。 在M...
typescript 实现状态模式
weixin_33774615的博客
02-06 597
2019独角兽企业重金招聘Python工程师标准>>> ...
【typescript】简单公用方法
EddyLwei的博客
05-30 2339
/**范围内获取整数随机数*//**范围内获取整数随机数*/ function getRandomInt(min: number, max: number): number { var Range = max - min; var Rand = Math.random(); return(min + Math.round(Rand * Range)); }判断Object是...
前端也要懂图形学：使用 TypeScript 实现光线追踪
奇舞周刊
06-28 1059
计算机图形学是什么Rasterization （光栅化）计算机图形学对于我们前端来说可能就是 WebGL，其实 WebGL 所代表的光栅化图形学只是计算机图形学中的一部分。从下图我们可以看...
Ts有限状态机
nuolo
06-05 737
ts版本的有限状态机 最近做小游戏要做切换人物状态，花点时间写了一个有限状态机，使用语言为Ts，也可改成自己的语言 按照目前的逻辑，这个可以继续横向扩展，某些做流程管理 先上预览图 Fsm：状态机类 FsmBase：状态机基类 FsmManager：状态机管理类 FsmState：状态类 FsmIdle FsmRun角色Ctrl测试用状态机类 代码：FsmBase//状态机基类 ...
FSM状态机框架
m0_61184185的博客
08-08 511
移除状态时需要注意如果要移除的状态是当前运行的状态且它不存在，则移除该状态，如果该状态是默认状态，则需要创建一个方法ChooseNewDefaultState，选择一个新的默认状态。进入状态方法判断进入的状态是否是普通状态，若是则执行State类的进入状态，若不是则执行StateMachine类的进入状态。创建一个判断是否满足过度条件的方法，若是满足过度条件，那么该状态可以过度到另外一个状态，若是不满足，则不能过度。在里面创建一个状态更新模块用于存放状态名称，状态更新事件，触发状态更新的参数。...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值