js modèles de conception : qu'est-ce qu'un modèle d'état ? Introduction au mode état js

Cet article vous apporte du contenu sur les modèles de conception js : qu'est-ce que le modèle d'état ? L'introduction au mode statut js a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer, j'espère qu'il vous sera utile.

Qu'est-ce que le mode état ?

Définition  : Encapsuler chaque état à l'intérieur d'une chose dans une classe. Les changements dans l'état interne produiront différents comportements.

Solution principale : Le comportement d'un objet dépend de son état (propriétés), et son comportement associé peut être modifié en fonction des changements de son état.

Quand utiliser : Le code contient un grand nombre d'instructions conditionnelles liées à l'état de l'objet.

Comment résoudre : Résumer diverses classes de statut spécifiques.

Exemples d'application du mode état js : 1. Lorsqu'ils jouent au basket-ball, les athlètes peuvent avoir des états normaux, anormaux et supranormaux. 2. Dans le carillon de Zeng Hou Yi, « la cloche est une interface abstraite », « Zhong A » et ainsi de suite sont des états concrets, et « le carillon de Zeng Hou Yi » est un environnement spécifique (contexte).

Avantages du mode statut js : 1. Encapsule les règles de conversion. 2. Énumérez les états possibles Avant d'énumérer les états, vous devez déterminer le type d'état. 3. Mettez tous les comportements liés à un certain état dans une classe et vous pourrez facilement ajouter de nouveaux états. Il vous suffit de changer l'état de l'objet pour modifier le comportement de l'objet. 4. Autoriser l'intégration de la logique de transition d'état à l'objet d'état au lieu d'un énorme bloc d'instructions conditionnelles. 5. Plusieurs objets d'environnement peuvent partager un objet d'état, réduisant ainsi le nombre d'objets dans le système.

Inconvénients du mode état js : 1. L'utilisation du mode état augmentera inévitablement le nombre de classes et d'objets système. 2. La structure et la mise en œuvre du mode état sont relativement complexes. S'il est mal utilisé, cela entraînera une confusion dans la structure et le code du programme. 3. Le mode état ne prend pas très bien en charge le « principe d'ouverture et de fermeture » Pour le mode état qui peut changer d'état, l'ajout d'une nouvelle classe d'état nécessite de modifier le code source responsable de la conversion d'état. état et modification Le comportement d'une certaine classe d'état nécessite également une modification du code source de la classe correspondante.

Scénarios d'utilisation du mode statut js : 1. Scénarios où le comportement change à mesure que le statut change. 2. Remplacement des instructions conditionnelles et de branchement.

Remarque : Utilisez le modèle d'état lorsque le comportement est contraint par des états et qu'il n'y a pas plus de 5 états.

Démo de scène

Pour une lampe électrique d'une certaine marque, appuyez une fois sur le bouton pour allumer la lumière faible, appuyez deux fois sur le bouton pour allumer la lumière forte et appuyez trois fois sur le bouton pour éteignez la lumière.

// 将状态封装成不同类
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()

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

Implémentation non orientée objet du modèle d'état

Avec l'aide du mécanisme de délégation de JavaScript, le modèle d'état peut être implémenté comme suit :

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

Recommandations associées :

modèles de conception js : Qu'est-ce que le modèle de décorateur ? Introduction au modèle de décorateur js

modèle de conception js : qu'est-ce que le modèle médiateur ? Introduction au mode médiateur js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!