JavaScript与有限状态机

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

var
menu = {

　　　　// 当前状态

　　　　currentState: ‘hide‘,

　　　　// 绑定事件

　　　　initialize: function() {

　　　　　　var
self = this;

　　　　　　self.on("hover", self.transition);

　　　　},

　　　　// 状态转换

　　　　transition: function(event){

　　　　　　switch(this.currentState) {

　　　　　　　　case
"hide":

　　　　　　　　　　this.currentState = ‘show‘;

　　　　　　　　　　doSomething();

　　　　　　　　　　break;

　　　　　　　　case
"show":

　　　　　　　　　　this.currentState = ‘hide‘;

　　　　　　　　　　doSomething();

　　　　　　　　　　break;

　　　　　　　　default:

　　　　　　　　　　console.log(‘Invalid State!‘);

　　　　　　　　　　break;

　　　　　　}

　　　　}

　　};

1

var
fsm = StateMachine.create();

1

2

3

4

5

6

7

8

9

10

11

12

var
fsm = StateMachine.create({

　　　　initial: ‘green‘,

　　　　events: [

　　　　　　{ name: ‘warn‘,  from: ‘green‘,  to: ‘yellow‘
},

　　　　　　{ name: ‘stop‘, from: ‘yellow‘, to: ‘red‘
},

　　　　　　{ name: ‘ready‘,  from: ‘red‘,    to: ‘yellow‘
},

　　　　　　{ name: ‘go‘, from: ‘yellow‘, to: ‘green‘
}

　　　　]

　　});

1

2

3

4

* fsm.current ：返回当前状态。

* fsm.is(s) ：返回一个布尔值，表示状态s是否为当前状态。

* fsm.can(e) ：返回一个布尔值，表示事件e是否能在当前状态触发。

* fsm.cannot(e) ：返回一个布尔值，表示事件e是否不能在当前状态触发。

1

2

* onbeforewarn：在warn事件发生之前触发。

* onafterwarn（可简写成onwarn） ：在warn事件发生之后触发。

1

2

* onleavegreen ：在离开green状态时触发。

* onentergreen（可简写成ongreen） ：在进入green状态时触发。

1

2

3

4

* onbeforeevent ：任一事件发生之前触发。

* onleavestate ：离开任一状态时触发。

* onenterstate ：进入任一状态时触发。

* onafterevent ：任一事件结束后触发。

1

2

3

4

5

6

fsm.onwarn = function(){

　　　　light.fadeOut(‘slow‘, function() {

　　　　　　fsm.transition();

　　　　});

　　　　return
StateMachine.ASYNC;

　　};

1

2

3

4

5

6

7

var
fsm = StateMachine.create({

　　　　// ...

　　　　error: function(eventName, from, to, args, errorCode, errorMessage) {

　　　　　　return
‘event ‘ + eventName + ‘: ‘
+ errorMessage;

　　　　},

　　　　// ...

　　});