Learning the state mode of the JavaScript design mode and the javascript Design Mode

Learning the state mode of the JavaScript design mode and the javascript Design Mode

The key to the state pattern is to distinguish the state inside a thing. Changes in the state inside a thing often lead to changes in the behavior of the thing.

When the light is on, press the switch, the light will switch to the off state, and then press the switch again, the light will be turned on again. The behavior of the same switch in different States is different.

I. Finite State Machine

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

Allows an object to change its behavior when its internal state changes. The object seems to have modified its class.
Explanation:
(1) encapsulate the state into an independent class and delegate the request to the current State object. When the internal state of the object changes, different behavior changes will occur.
(2) The objects used have completely different behaviors (delegated effect) in different States)

When it comes to encapsulation, the behavior of encapsulated objects is generally given priority, rather than the object state.
However, in the State mode, the opposite is true. The key of the state mode is to encapsulate every state of a thing into a separate class.

Ii. Example

Cycle of the lighting program (low light-> strong light-> turn off the light)

// Turn off the light var OffLightState = function (light) {this. light = light ;}; // low light var OffLightState = function (light) {this. light = light ;}; // strong light var StrongLightState = function (light) {this. light = light;}; var Light = function () {/* Switch Status */this. offLight = new OffLightState (this); this. weakLight = new WeakLightState (this); this. strongLight = new StrongLightState (this);/* button */this. button = null;}; Light. pr Ototype. init = function () {var button = document. createElement ("button"), self = this; this. button = document. body. appendChild (button); this. button. innerHTML = 'tog'; this. currentState = this. offLight; this. button. click = function () {self. currentState. buttonWasPressed () ;}}; // Let the abstract method of the abstract parent class directly throw an exception (to avoid the State subclass failing to implement the buttonWasPressed method) Light. prototype. buttonWasPressed = function () {throw new Error ("button of the parent class The WasPressed method must be overwritten ") ;}; Light. prototype. setState = function (newState) {this. currentState = newState;};/* Turn off the light */OffLightState. prototype = new Light (); // inherits the abstract class OffLightState. prototype. buttonWasPressed = function () {console. log ("turn off the light! "); This. light. setState (this. light. weakLight);}/* low light */WeakLightState. prototype = new Light (); WeakLightState. prototype. buttonWasPressed = function () {console. log ("low light! "); This. light. setState (this. light. strongLight) ;};/* strong light */StrongLightState. prototype = new Light (); StrongLightState. prototype. buttonWasPressed = function () {console. log ("strong light! "); This. light. setState (this. light. offLight );};

PS: Description
MustOffLightState, WeakLightState, and StrongLightStateConstructor advance.

new A("a");var A = function(a) {  console.log(a)}new B("b");function B(b) {  console.log(b);}

The function declaration is promoted to the normal variable.

Iii. Performance Optimization

(1) how to manage the creation and destruction of State objects?
First, it is created and subsequently destroyed only when the state object is needed (the state object is large and preferred ),
The other is to create all State objects from the beginning and never destroy them (the State changes frequently ).
(2) share a state object in the metadata mode.

Iv. JavaScript-version state machine

(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 ();

I hope this article will help you learn about javascript programming.

Articles you may be interested in:

• Suggestions on javascript design mode recommendation
• Analysis of combined JavaScript Design Patterns
• Javascript design pattern-basic for Object-Oriented Learning
• JavaScript design mode Security Sandbox Mode
• Explanation of the interpreter mode in the javascript Design Mode
• JavaScript design pattern-Observer pattern (publisher-subscriber pattern)
• Examples of JavaScript Design Patterns in singleton Mode
• Rule mode example of JavaScript Design Mode
• Introduction to the prototype of JavaScript design patterns (Object. create and prototype)
• Introduction to the builder mode of JavaScript Design Patterns