5ndn-fsm 中文文档教程

Question

5NDN FSM

一个灵活的 Javascript 有限状态机。

Installation

npm install 5ndn-fsm

Basic Usage

创建一个实例

var stateMachine = new StateMachine(this);

创建一些状态

var RedState = new State();
var BlueState = new State();

将它们添加到管理器

//pass true to initialize
stateManager.addState( 'red', RedState, true );
stateManager.addState( 'blue', BlueState );

更改

stateManager.setState('blue');

Real Usage

状态您通常需要扩展 State 类。 真正的魔法发生在您可以覆盖的方法内部。

CREATING OUR STATES

创建您的类并扩展 State

import {State} from '5ndn-fsm';

class RedState extend State{

    constructor(){
        super();
    }

    get KEY(){
        return "Red State";
    }

    doIntro(){

        // This is where your animation happen

        // When they're done! Don't forget to call the super method
        super.doIntro();
    }

    action(){

        // Use the context to change anything you need
        this.context.color = "red"

        // This is called right after doIntro is completed
    }

    doOutro(){

        // This is more animations happen

        // Again, do forget to call the super method
        super.doOutro();
    }
}

吸气剂“KEY”用于您只想将 State 类传递给 addState 方法。 始终调用超级方法让经理知道你在哪里很重要。 如果您忘记了，我们会通知您的经理。 action 方法是唯一没有任何可调用的方法。

import {State} from '5ndn-fsm';

class RedState extend State{

    constructor(){
        super();
    }

    get KEY(){
        return 'Blue State';
    }

    doIntro(){

        // This is where your animation happen

        // When they're done! Don't forget to call the super method
        super.doIntro();
    }

    action(){

        // This being the blue state
        this.context.color = "blue";

        // This is called right after doIntro is completed
    }

    doOutro(){

        // This is more animations happen

        // Again, do forget to call the super method
        super.doOutro();
    }
}

在上面的两个 State 类中，我们更改了action 方法中的颜色。

CREATING OUR MANAGER

因为我们使用了 getter 方法 KEY 我们可以只传递类函数。 （那样看起来很漂亮）

import {StateManager} from '5ndn-fsm';

class MyContext{

    constructor(){

        this.color = "white";

        this.stateManager = new StateManager( this );
        this.stateManager.addState( RedState, true );
        this.stateManager.addState( BlueState );
    }

CHANGE STATES AND LISTENING FOR CHANGES

知道何时完成更改可以非常有效。 您可以通过事件 emmtter 收听此更改。 感谢 Miller Medeiros 和 Robert Penner https://millermedeiros.github.io/js-signals/

this.stateManager.action.add( function(key){ console.log(key) } );
this.stateManager.introStart.add( function(key){ console.log(key) } );
this.stateManager.outroStart.add( function(key){ console.log(key) } );
this.stateManager.introComplete.add( function(key){ console.log(key) } );
this.stateManager.outroComplete.add( function(key){ console.log(key) } );

this.stateManager.setState( BlueState.KEY );

Set State 也返回一个 Promise（如果你喜欢那种东西）。 所以你可以做类似的事情。

<代码>javascript this.stateManager.setState( BlueState.KEY ).then( function(){ // 做其他事情 });

Support

Contributing