Shulou(Shulou.com)06/02 Report--

This article mainly explains "what are the characteristics of JavaScript finite state machine". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the characteristics of JavaScript finite state machine"?

The finite state machine (Finite-state machine) is a very useful model that can simulate most things in the world.

To put it simply, it has three characteristics:

* Total status (state) is limited.

* be in only one state at any one time.

* under certain conditions, it will change from one state (transition) to another.

What it means to JavaScript is that many objects can be written as finite state machines.

For example, there is a menu element on the page. When the mouse hovers, the menu is displayed; when the mouse is moved away, the menu is hidden. If you use a finite state machine description, it means that the menu has only two states (show and hide), and the mouse will cause a state transition.

The code can be written as follows:

Var menu = {/ / current state currentState: 'hide', / / bind event initialize: function () {var self = this; self.on ("hover", self.transition);}, / / State transition transition: function (event) {case "hide": this.currentState =' show'; doSomething (); break; case "" show ": this.currentState = 'hide'; doSomething () Break; default: console.log ('Invalid staged'); break;}

It can be seen that the writing method of the finite state machine has clear logic and strong expressive power, which is conducive to encapsulating events. The more states and events of an object, the more suitable it is to use finite state machine.

In addition, JavaScript is a language with a lot of asynchronous operations, and the common solution is to specify callback functions, but this will cause problems such as code structure confusion, difficult testing and debugging. The finite state machine provides a better way: link the asynchronous operation to the state change of the object, and when the asynchronous operation ends, the corresponding state change occurs, which triggers other operations. This is more logically reasonable and easier to reduce the complexity of the code than callback functions, event listening, publish / subscribe and other solutions.

Javascript Finite State Machine, a function library of finite state machine, is introduced below. This library is very easy to understand, can help us deepen our understanding, and the function is not weak at all.

The library provides a global object, StateMachine, whose create method allows you to generate an instance of a finite state machine.

Var fsm = StateMachine.create ()

When generating, you need to provide a parameter object that describes the nature of the instance. For example, traffic lights (traffic lights) can be described as follows:

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

The initial state (initial) of traffic lights is green,events, which is a variety of events that trigger state changes, such as warn events make green state into yellow state, stop events make yellow state become red state, and so on.

After the instance is generated, you can query the current status at any time.

* fsm.current: returns the current status.

* fsm.is (s): returns a Boolean value indicating whether the state s is the current state.

* fsm.can (e): returns a Boolean value indicating whether event e can be triggered in the current state.

* fsm.cannot (e): returns a Boolean value indicating whether event e cannot be triggered in the current state.

Javascript Finite State Machine allows you to specify two callback functions for each event, such as the warn event:

* onbeforewarn: triggered before the warn event occurs.

* onafterwarn (abbreviated as onwarn): triggered after the warn event occurs.

At the same time, it also allows you to specify two callback functions for each state, such as the green state:

* onleavegreen: triggered when leaving green status.

* onentergreen (abbreviated as ongreen): triggered when the green state is entered.

Assuming that the warn event changes the state from green to yellow, the above four types of callback functions occur in the following order: onbeforewarn → onleavegreen → onenteryellow → onafterwarn.

In addition to specifying callback functions separately for each event and state, you can also specify common callback functions for all events and states.

* onbeforeevent: triggered before any event occurs.

* onleavestate: triggered when leaving any state.

* onenterstate: triggered when any state is entered.

* onafterevent: triggered after any event ends.

If there is an asynchronous operation in the callback function of the event (such as Ajax communication with the server), we may want to wait until the asynchronous operation ends before the state change occurs. The transition method is used for this.

Fsm.onleavegreen = function () {light.fadeOut ('slow', function () {fsm.transition ();}); return StateMachine.ASYNC;}

In the callback function of the above code, there is an asynchronous operation (light.fadeOut). If you do not want the state to change immediately, let the callback function return StateMachine.ASYNC, indicating that the state does not change for the time being; wait until the end of the asynchronous operation, and then call the transition method to change the state.

Javascript Finite State Machine also allows you to specify error handlers that are automatically triggered when an event occurs that is impossible in the current state.

Var fsm = StateMachine.create ({/ /... Error: function (eventName, from, to, args, errorCode, errorMessage) {return 'event' + eventName +':'+ errorMessage;}, / /...})

For example, the current state is green, and theoretically only warn events can occur at this time. If the stop event occurs at this time, the above error handler will be triggered.

Thank you for your reading, the above is the content of "what are the characteristics of JavaScript finite state machine". After the study of this article, I believe you have a deeper understanding of the characteristics of JavaScript finite state machine, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.