Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
A finite state machine javascript micro framework
JavaScript CSS Ruby
Tag: 1.1.0

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
demo
minifier
test
LICENSE
README.md
Rakefile
index.html
state-machine.js
state-machine.min.js

README.md

Javascript Finite State Machine

This standalone javascript micro-framework provides a finite state machine for your pleasure.

Download

You can download state-machine.js, or the minified version

Alternatively:

git clone git@github.com:jakesgordon/javascript-state-machine
  • All code is in state-machine.js
  • Minified version provided in state-machine.min.js
  • No 3rd party library is required
  • Demo can be found in /index.html
  • QUnit tests can be found in /test/index.html

Usage

Include state-machine.min.js in your application.

In its simplest form, create a standalone state machine using:

var fsm = StateMachine.create({
  initial: 'green',
  events: [
    { name: 'warn',  from: 'green',  to: 'yellow' },
    { name: 'panic', from: 'yellow', to: 'red'    },
    { name: 'calm',  from: 'red',    to: 'yellow' },
    { name: 'clear', from: 'yellow', to: 'green'  }
]});

... will create an object with a method for each event:

  • fsm.warn() - transition from 'green' to 'yellow'
  • fsm.panic() - transition from 'yellow' to 'red'
  • fsm.calm() - transition from 'red' to 'yellow'
  • fsm.clear() - transition from 'yellow' to 'green'

along with the following members:

  • fsm.current - contains the current state
  • fsm.is(s) - return true if state s is the current state
  • fsm.can(e) - return true if event e can be fired in the current state
  • fsm.cannot(e) - return true if event e cannot be fired in the current state

NOTE: If an event should be allowed from multiple states, simply provide an array of state names in the event's from argument.

Hooks

4 hooks are available if your object has methods using the following naming conventions:

  • onbeforeevent - fired before an event
  • onafterevent - fired after an event
  • onenterstate - fired when entering a state
  • onleavestate - fired when leaving a state

For convenience, the 2 most useful hooks can be shortened:

  • onevent - convenience shorthand for onafterevent
  • onstate - convenience shorthand for onenterstate

Hooks can be added after the FSM is created:

var fsm = StateMachine.create({
  initial: 'green',
  events: [
    { name: 'warn',  from: 'green',  to: 'yellow' },
    { name: 'panic', from: 'yellow', to: 'red'    },
    { name: 'calm',  from: 'red',    to: 'yellow' },
    { name: 'clear', from: 'yellow', to: 'green'  }
]});

fsm.onpanic  = function() { alert('panic!'); };
fsm.onclear  = function() { alert('all clear!'); };
fsm.ongreen  = function() { document.body.className = 'green';  };
fsm.onyellow = function() { document.body.className = 'yellow'; };
fsm.onred    = function() { document.body.className = 'red';    };

fsm.panic()
fsm.clear()
...

State Machine Classes

You can also turn all instances of a class into an FSM by applying the state machine functionality in a constructor function using the target option, and adding your hooks into the prototype:

MyFSM = function() {         // my constructor function
  StateMachine.create({
    target: this,
    initial: 'green',
    events: [
      { name: 'warn',  from: 'green',  to: 'yellow' },
      { name: 'panic', from: 'yellow', to: 'red'    },
      { name: 'calm',  from: 'red',    to: 'yellow' },
      { name: 'clear', from: 'yellow', to: 'green'  }
    ]});

  // other constructor behavior

};

MyFSM.prototype = {

  onpanic: function() { alert('panic'); },
  onclear: function() { alert('all is clear'); },

  // other prototype methods

};

This should be easy to adjust to fit your appropriate mechanism for object construction.

Initialization Options

How the state machine should initialize can depend on your application requirements, so the library provides a number of simple options.

By default, if you dont specify any initial state, the state machine will be in the 'none' state and you would need to provide an event to take it out of this state:

var fsm = StateMachine.create({
  events: [
    { name: 'startup', from: 'none',  to: 'green' },
    { name: 'panic',   from: 'green', to: 'red'   },
    { name: 'calm',    from: 'red',   to: 'green' },
]});
alert(fsm.current); // "none"
fsm.startup();
alert(fsm.current); // "green"

If you specify the name of your initial event (as in all the earlier examples), then an implicit startup event will be created for you and fired when the state machine is constructed.

var fsm = StateMachine.create({
  initial: 'green',
  events: [
    { name: 'panic', from: 'green', to: 'red'   },
    { name: 'calm',  from: 'red',   to: 'green' },
]});
alert(fsm.current); // "green"

If your object already has a startup method you can change the name of the initial event

var fsm = StateMachine.create({
  initial: { state: 'green', event: 'init' },
  events: [
    { name: 'panic', from: 'green', to: 'red'   },
    { name: 'calm',  from: 'red',   to: 'green' },
]});
alert(fsm.current); // "green"

Finally, if you want to wait to call the initial state transition event until a later date you can defer it:

var fsm = StateMachine.create({
  initial: { state: 'green', event: 'init', defer: true },
  events: [
    { name: 'panic', from: 'green', to: 'red'   },
    { name: 'calm',  from: 'red',   to: 'green' },
]});
alert(fsm.current); // "none"
fsm.init();
alert(fsm.current); // "green"

Of course, we have now come full circle, this last example is pretty much functionally the same as the first example in this section where you simply define your own startup event.

So you have a number of choices available to you when initializing your state machine.

License

See LICENSE file.

Contact

If you have any ideas, feedback, requests or bug reports, you can reach me at jake@codeincomplete.com, or via my website: Code inComplete.

Something went wrong with that request. Please try again.