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

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

  • onBeforeTransition - 转换发生前事件

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

  • onTransition - 转换进行种的事件

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

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

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

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

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

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

还有两种简化的写法:

  • onAfter可以简化为on
  • onEnter 可以简化为on

这些名称需要使用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() { /* ... */ }
    }
  });

你可能感兴趣的:(界面上的有限状态机(四))