03.生命周期事件

为了跟踪或执行当转换动作发生时的行为，有以下五个通用生命周期事件可以观测:

• onBeforeTransition - 执行任意转换动作前被触发
• onLeaveState - 离开任意状态时被触发
• onTransition - 执行任意转换动作期间被触发
• onEnterState - 刚进入任意状态时被触发
• onAfterTransition - 执行任意转换动作后被触发

除了通用事件之外，还可以使用特定的转换动作和状态名称来观察:

• onBefore - 执行指定转换动作前被触发
• onLeave - 离开指定状态时被触发
• onEnter - 刚进入指定状态时被触发
• onAfter - 执行指定转换动作后被触发

为了方便起见，两个最有用的事件可以进行缩写：

• on - onAfter的简写
• on - onEnter的简写

观测生命周期

使用观察者方法观察单个生命周期事件：

  fsm.observe('onStep', function() {
    console.log('stepped');
  });

使用观察者方法观察多个生命周期事件：

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

状态机观察自己的生命周期:

  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'); }
    }
  });

生命周期事件的参数

具有以下属性的lifecycle对象将作为参数传递给观察者:

• transition - 转换动作的名称
• from - 上一个状态
• to - 下一个状态

除了lifecycle参数，观察者还接收任意个传递给转换方法的参数。

  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');

生命周期事件名

生命周期事件名总是使用标准的js驼峰命名法。 即便你的转换方法和状态没有这样命名：

  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() { /* ... */ }
    }
  });

生命周期事件执行顺序列表

综上所述，转换的生命周期按以下顺序执行：

• onBeforeTransition - 执行任意转换动作前被触发
• onBefore - 执行指定转换动作前被触发
• onLeaveState - 离开任意状态时被触发
• onLeave - 离开指定状态时被触发
• onTransition - 执行任意转换动作期间被触发
• onEnterState - 刚进入任意状态时被触发
• onEnter - 刚进入指定状态时被触发
• on - onEnter的简写
• onAfterTransition - 执行任意转换动作后被触发
• onAfter - 执行指定转换动作后被触发
• on - onAfter的简写

取消转换动作

在下列任意生命周期事件中，观察者都可以通过显式的返回false来取消转换动作

• onBeforeTransition
• onBefore
• onLeaveState
• onLeave
• onTransition

所有后续生命周期事件都将被取消，状态将保持不变。