Easy understanding of JavaScript status mode and easy understanding of javascript

Easy understanding of JavaScript status mode and easy understanding of javascript

Status Mode 

The State mode allows an object to change its behavior when its internal State changes. The object seems to have modified its class.

The usage scenarios of the Status mode are also specific, including the following:
1. The behavior of an object depends on its state, and it must change its behavior according to its state at runtime. (Some objects usually have several states. In each State, only the current state can be done, rather than other States)

2. An operation contains a large number of branch statements, and these branch statements depend on the state of the object. The status is usually expressed by one or more enumerated constants.

I. Finite State Machine

1. The total number of States is limited.
2. At any time point, it is in only one State.
3. Under certain conditions, it will change from one state to another.

Common Practice: encapsulate the state into an independent class (state machine) and delegate the request to the current State object. When the internal state of the object changes, different behavior changes will occur.

Ii. Performance Optimization

1. How to manage the creation and destruction of State objects? The first is to create and destroy the state object only when the state object is needed (the state object is large and preferred), and the other is to create all the state objects from the beginning, and never destroy them (the status changes frequently ).
2. Share a state object in the metadata mode.

For a slightly complex example, I believe everyone has played role-playing games, and there are many types of roles in them (station, walk, run, jump, squat, etc ), the switching between States is well defined, and can only be in one State at any time. In each state, A role can only perform permitted behaviors in the current State (such as common attacks, various skill attacks, and defense)

Here is an example of the mobile ball I wrote:

<! DOCTYPE html> 
Iii. JavaScript-version state machine(Take a simple switch light as an example)

1. Use the Function. prototype. call method to directly delegate a request to a literal object for execution.

// State machine var FSM = {off: {buttonWasPressed: function () {console. log ("turn off the light"); this. button. innerHTML = "The next time you press I to turn on the Light"; // This is an attribute on the Light !!! This. currState = FSM. on; // this is the property on Light !!! }}, On: {buttonWasPressed: function () {console. log ("turn on the light"); this. button. innerHTML = "The next time you press me to turn off the light"; this. currState = FSM. off ;}},}; var Light = function () {this. currState = FSM. off; // set the current status this. button = null;}; Light. prototype. init = function () {var button = document. createElement ("button"); self = this; button. innerHTML = "turn off the light"; this. button = document. body. appendChild (button); this. button. onclick = function () {// The request is delegated to the FSM state machine self. currState. buttonWasPressed. call (self) ;}}var light = new Light (); light. init ();
2. Use the delegate Function

Var delegate = function (client, delegation) {return {buttonWasPressed: function () {return delegation. buttonWasPressed. apply (client, arguments) ;}};// state machine var FSM ={ off: {buttonWasPressed: function () {console. log ("turn off the light"); this. button. innerHTML = "The next time you press I to turn on the light"; this. currState = this. onState ;}, on: {buttonWasPressed: function () {console. log ("turn on the light"); this. button. innerHTML = "The next time you press me to turn off the light"; this. currState = this. offState ;}},}; var Light = function () {this. offState = delegate (this, FSM. off); this. onState = delegate (this, FSM. on); this. currState = this. offState; // set the current state this. button = null;}; Light. prototype. init = function () {var button = document. createElement ("button"); self = this; button. innerHTML = "turn off the light"; this. button = document. body. appendChild (button); this. button. onclick = function () {// The request is delegated to the FSM state machine self. currState. buttonWasPressed () ;}} var light = new Light (); light. init ();
The status mode is similar to the policy mode. They all encapsulate a series of algorithms or actions. They all have a context object to delegate requests to the encapsulation class (strategy class, state machine ), but their intentions are different:
1. The attributes of the strategy class are equal and parallel, and there is no connection between them.
2. The statuses in the state machine are switched to each other and are specified.

References:JavaScript mode: JavaScript design mode and development practices

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.