The life cycle

To track or perform the behavior when the transition action occurs, there are five common lifecycle events to observe:

  • onBeforeTransition– Triggered before performing any conversion action
  • onLeaveState– Triggered when leaving any state
  • onTransition– Triggered during execution of any transformation action
  • onEnterState– Triggered when entering any state
  • onAfterTransition– Triggered after performing any conversion action

In addition to generic events, specific transition actions and state names can be used to observe:

  • onBefore<TRANSITION>– Triggered before performing the specified transformation action
  • onLeave<STATE>– Triggered when leaving the specified state
  • onEnter<STATE>– Triggered when entering the specified state
  • onAfter<TRANSITION>– Triggered after the specified conversion action is performed

For convenience, the two most useful events can be abbreviated:

  • on<TRANSITION> – onAfter<TRANSITION>The shorthand
  • on<STATE> – onEnter<STATE>The shorthand

Observed life cycle

Observe a single lifecycle event using the observer method:

  fsm.observe('onStep'.function() {
    console.log('stepped');
  });
Copy the code

Observe multiple lifecycle events using the observer method:

  fsm.observe({
    onStep: function() { console.log('stepped');         }
    onA:    function() { console.log('entered state A'); }
    onB:    function() { console.log('entered state B'); }});Copy the code

The state machine observes its own life cycle:

  var fsm = new StateMachine({
    init: 'A'.transitions: [{name: 'step'.from: 'A'.to: 'B'}].methods: {
      onStep: function() { console.log('stepped');         }
      onA:    function() { console.log('entered state A'); }
      onB:    function() { console.log('entered state B'); }}});Copy the code

Parameters for life cycle events

Lifecycle object with the following properties will be passed as a parameter to the observer:

  • Transition – The name of the transition action
  • From – Previous state
  • To – Next state

In addition to the Lifecycle parameter, the observer receives any parameters that are passed to the transformation method.

  var fsm = new StateMachine({
    transitions: [{name: 'step'.from: 'A'.to: 'B'}].methods: {
      onTransition: function(lifecycle, arg1, arg2) {
        console.log(lifecycle.transition); // 'step'
        console.log(lifecycle.from);       // 'A'
        console.log(lifecycle.to);         // 'B'
        console.log(arg1);                 / / 42
        console.log(arg2);                 // 'hello'}}}); fsm.step(42.'hello');
Copy the code

Life cycle event name

Life cycle event names always use the standard JS hump nomenclature. Even if your transition method and state are not named like this:

  var fsm = new StateMachine({
    transitions: [{name: 'do-with-dash'.from: 'has-dash'.to: 'has_underscore'   },
      { name: 'do_with_underscore'.from: 'has_underscore'.to: 'alreadyCamelized' },
      { name: 'doAlreadyCamelized'.from: 'alreadyCamelize'.to: 'has-dash'}].methods: {
      onBeforeDoWithDash:         function() { / *... * / },
      onBeforeDoWithUnderscore:   function() { / *... * / },
      onBeforeDoAlreadyCamelized: function() { / *... * / },
      onLeaveHasDash:             function() { / *... * / },
      onLeaveHasUnderscore:       function() { / *... * / },
      onLeaveAlreadyCamelized:    function() { / *... * / },
      onEnterHasDash:             function() { / *... * / },
      onEnterHasUnderscore:       function() { / *... * / },
      onEnterAlreadyCamelized:    function() { / *... * / },
      onAfterDoWithDash:          function() { / *... * / },
      onAfterDoWithUnderscore:    function() { / *... * / },
      onAfterDoAlreadyCamelized:  function() { / *... * /}}});Copy the code

List of life cycle events executed in sequence

To sum up, the transformation lifecycle is executed in the following order:

  • onBeforeTransition– Triggered before performing any conversion action
  • onBefore<TRANSITION>– Triggered before performing the specified transformation action
  • onLeaveState– Triggered when leaving any state
  • onLeave<STATE>– Triggered when leaving the specified state
  • onTransition– Triggered during execution of any transformation action
  • onEnterState– Triggered when entering any state
  • onEnter<STATE>– Triggered when entering the specified state
  • on<STATE> – onEnter<STATE>The shorthand
  • onAfterTransition– Triggered after performing any conversion action
  • onAfter<TRANSITION>– Triggered after the specified conversion action is performed
  • on<TRANSITION> – onAfter<TRANSITION>The shorthand

Cancel conversion action

In any of the following life cycle events, the observer can cancel the transition action by explicitly returning false

  • onBeforeTransition
  • onBefore<TRANSITION>
  • onLeaveState
  • onLeave<STATE>
  • onTransition

All subsequent life cycle events are cancelled and the state remains unchanged.