界面上的有限状态机(四）

前面介绍了有限状态机的状态和转换，具体界面响应是在状态转换时进行的，比如如果用户按了按钮，某些控件会不可见，这些动作需要在状态转换时的事件响应中完成，在状态转换时，会有有五种事件发生，按顺序如下：

• onBeforeTransition - 转换发生前事件

• onLeaveState - 离开上一个状态的事件

• onTransition - 转换进行种的事件

• onEnterState - 进入下一个状态的事件

• onAfterTransition - 转换完成后的事件
  这些事件针对所有的状态和转换，如果针对特定的事件和转换，可以将上面的函数种的Transition和State换为具体的名称：

• onBefore<TRANSITION> - 特定转换发生前的事件

• onLeave<STATE> - 离开特定状态的事件

• onEnter<STATE> - 进入特定状态的事件

• onAfter<TRANSITION> - 特定转换完成的事件

还有两种简化的写法：

• onAfter<TRANSITION>可以简化为on<TRANSITION>
• onEnter<STATE> 可以简化为on<STATE>

这些名称需要使用javascript的驼峰命名方式，不管状态和转移如何定义，下面是例子：

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