Hello everyone, I am the 06th student of the Shenzhen Branch of the IT Cultivation Institute, an honest and kind web programmer.
Today, I will share with you the knowledge points that may be used in the JS-04 mission on the official website of the Cultivation Institute:
1. Background introduction
What is a finite state machine?
A finite state machine (English: Finite-state machine, FSM), also known as a finite state automaton, or a state machine for short, is a mathematical model that represents a finite number of states and behaviors such as transitions and actions between these states.
Its role is mainly to describe the sequence of states that an object experiences during its life cycle, and how to respond to various events from the outside world. In computer science, finite state machines are widely used in modeling application behavior, hardware circuit system design, software engineering, compilers, network protocols, and computing and language research.
TCP protocol state machine
2. Knowledge analysis
Let's take a look at Ruan Yifeng's description of a finite state machine.
It has three characteristics:
the total number of states (state) is limited.
At any one time, there is only one state.
Under certain conditions, there will be a transition from one state 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 a web page. When the mouse is hovered, the menu is displayed; when the mouse is removed, the menu is hidden. If described by a finite state machine, this menu has only two states (show and hide), and the mouse will cause a state transition.
var menu = {
// current state
currentState: 'hide',
// binding event
initialize: function() {
var self = this;
self.on("hover", self.transition);
},
// state 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;
}
}
};
But in fact we just need to convert a state, move the mouse over to display the menu, Otherwise hidden, the above code is relatively inefficient and clumsy, complicating simple problems.
Therefore, if-else can work well when the problem is small, but when the problem is large, whether it is a large number of if-else or the problem solution itself will be complex and difficult to maintain. At this time, state is introduced. The concept of the machine is very effective.
And when we hand over the implementation of the state machine to a library like javascript-state-machine, we actually only care about the solution itself, rather than implementing the state machine ourselves. When we only care about the solution itself, the difficulty of solving the problem is undoubtedly easier.
3. Frequently Asked Questions
How to use the javascript-state-machine library4. Solutions
Introduce JS file state-machine
5. Code combat
The code can be viewed in the video or in my task 4
Task 4 state machine related code
6. Expand your thinking
How to decide when or how to use a finite state machine
7. References
Reference 1: javascript-state-machine
Reference 2: Ruan Yifeng's network log
8. More discussion
①Can one js file use two finite state machines at the same time?
different variable names
② Does js only have the state-machine library?
More than that, I know about ruby as well.
③What are the advantages of finite state machines, compared with ordinary if judgment statements?
It is easy to read, understand, maintain, and more importantly, it is helpful for the synthesizer to optimize the code, for the user to add appropriate timing constraints, and for the placer to implement the design.
That's it for today's sharing, everyone is welcome to like, forward, leave a message, and make a brick~
Students who are interested in learning programming can refer to my daily summary, learn from each other and make progress together
http://www.jnshu.com/login/1/21055279