js design patterns: what is state pattern? Introduction to js state mode

This article brings you content about js design patterns: What is the state pattern? The introduction to js status mode has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

What is the state pattern?

Definition: Encapsulate each state inside a thing into a class. Changes in the internal state will produce different behaviors.

Main solution: The behavior of an object depends on its state (property), and its related behavior can be changed according to changes in its state.

When to use: The code contains a large number of conditional statements related to the state of the object.

How to solve: Abstract various specific status classes.

js state mode application examples: 1. When playing basketball, athletes can have normal state, abnormal state and supernormal state. 2. In Zeng Hou Yi’s Chime, ‘bell is an abstract interface’, ‘Zhong A’ and so on are concrete states, and ‘Zeng Hou Yi’s Chime’ is the specific environment (Context).

Advantages of js state mode: 1. Encapsulates conversion rules. 2. Enumerate possible states. Before enumerating states, you need to determine the state type. 3. Put all the behaviors related to a certain state into a class, and you can easily add new states. You only need to change the object state to change the object's behavior. 4. Allow the state transition logic to be integrated with the state object instead of a huge conditional statement block. 5. Multiple environment objects can share a state object, thereby reducing the number of objects in the system.

Disadvantages of js state mode: 1. The use of state mode will inevitably increase the number of system classes and objects. 2. The structure and implementation of the state mode are relatively complex. If used improperly, it will lead to confusion in the program structure and code. 3. The state mode does not support the "opening and closing principle" very well. For the state mode that can switch states, adding a new state class requires modifying the source code responsible for state conversion. Otherwise, it cannot switch to the new state, and the modification The behavior of a certain state class also requires modification of the source code of the corresponding class.

js state mode usage scenarios: 1. Scenarios where behavior changes as the state changes. 2. Replacement of conditional and branch statements.

Note: Use the state mode when the behavior is constrained by the state, and there are no more than 5 states.

Scenario demo

For a certain brand electric lamp, press the button once to turn on the low light, press the button twice to turn on the strong light, and press the button three times to turn off the light.

// 将状态封装成不同类
const weakLight = function(light) {
  this.light = light
}

weakLight.prototype.press = function() {
  console.log('打开强光')
  this.light.setState(this.light.strongLight)
}

const strongLight = function(light) {
  this.light = light
}

strongLight.prototype.press = function() {
  console.log('关灯')
  this.light.setState(this.light.offLight)
}

const offLight = function(light) {
  this.light = light
}

offLight.prototype.press = function() {
  console.log('打开弱光')
  this.light.setState(this.light.weakLight)
}

const Light = function() {
  this.weakLight = new weakLight(this)
  this.strongLight = new strongLight(this)
  this.offLight = new offLight(this)
  this.currentState = this.offLight          // 初始状态
}

Light.prototype.init = function() {
  const btn = document.createElement('button')
  btn.innerHTML = '按钮'
  document.body.append(btn)
  const self = this
  btn.addEventListener('click', function() {
    self.currentState.press()
  })
}

Light.prototype.setState = function(state) { // 改变当前状态
  this.currentState = state
}

const light = new Light()
light.init()

// 打开弱光
// 打开强光
// 关灯

Non-object-oriented implementation of the state pattern

With the help of JavaScript’s delegation mechanism, the state pattern can be implemented as follows:

const obj = {
  'weakLight': {
    press: function() {
      console.log('打开强光')
      this.currentState = obj.strongLight
    }
  },
  'strongLight': {
    press: function() {
      console.log('关灯')
      this.currentState = obj.offLight
    }
  },
  'offLight': {
    press: function() {
      console.log('打开弱光')
      this.currentState = obj.weakLight
    }
  },
}

const Light = function() {
  this.currentState = obj.offLight
}

Light.prototype.init = function() {
  const btn = document.createElement('button')
  btn.innerHTML = '按钮'
  document.body.append(btn)
  const self = this
  btn.addEventListener('click', function() {
    self.currentState.press.call(self) // 通过 call 完成委托
  })
}

const light = new Light()
light.init()

Related recommendations:

js design patterns: What is the decorator pattern? Introduction to js decorator pattern

#js design pattern: What is the mediator pattern? Introduction to js mediator pattern

The above is the detailed content of js design patterns: what is state pattern? Introduction to js state mode. For more information, please follow other related articles on the PHP Chinese website!