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

This article will explain in detail how to use "finite state machine" to solve complex interaction problems in front-end development. the content of the article is of high quality, so the editor will share it for you as a reference. I hope you will have some understanding of the relevant knowledge after reading this article.

There is no doubt that front-end development is logical. The programmer's thinking logic gives the code various abilities, but the front-end development is often faced with the operation of the user. In a more complex page (it seems that there are few simple pages now), the user's actions are unpredictable. If there are many buttons, each button will do its own thing. If God bless all these operations, these events are not limited to each other, and the results do not affect each other, that is no problem. But there seems to be no such good luck in development, so you often need to coordinate and balance the execution of these functions.

This frustrating situation is especially obvious if you are using pure JS or only jQuery, and the front-end MVC hides and deals with these problems to some extent, but not completely. At this point you may need to understand the concept of a "finite state machine", which should be a useful thing in front-end development.

Describe the finite state machine:

Finite state automaton, referred to as state machine, is a mathematical model that represents the behavior of finite states and the transfer and action between these states.

The total number of states (state) is limited.

There is only one state at any one time.

Under certain conditions, it will change from one state to another.

In Wikipedia, it is said that the finite state machine FSM is a powerful tool for designing and implementing complex behavior organization principles in event-driven programs.

For the front end, especially when Javascript programming, the significance of this model is that it can be applied to many objects. For example, a button is usually a normal button, and when you click it, it becomes an input. Of course, you may say that such a simple function, I can directly use jQuery or even do not need to operate DOM to show and hide. If you still have this naive idea, I can only say that you have never encountered a page that makes you miserable. When the page is complex to a certain extent, simply using DOM to deal with the front end will only speed up your crazy process.

Here, for the finite state machine model applied by Button, the btn object has only two states, display state and edit state. Look at the code:

Var btn = {/ / current state currentState: 'btn', / / bind event initialize: function () {var self = this; self.on ("click", self.transition);}, / / State transition transition: function (event) {switch (this.currentState) {case "btn": this.currentState =' input'; doSomething () Break; case "input": this.currentState = 'btn'; doSomething (); break; default: console.log (' Invalid staging'); break;}

The above is the writing of the finite state machine, which is logically and hierarchically clear, and for objects with more states, the more suitable it is.

Through this model of finite state machine, I think the most important thing is to separate the user's behavior, that is, the event response of the component (such as click) from the behavior of the component. Specifically, by building a finite state machine model, we do not care what the user's click behavior does, and the component may have several states corresponding to different representations, while the user-triggered event simply switches the state of the model. As for the specific performance and behavior of each state, we can define it separately, that is to say, a decoupling of behavior and response.

On the front-end development of how to use the "finite state machine" to solve complex interaction problems to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

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.