js-Designmuster: Was ist ein Zustandsmuster? Einführung in den js-Statusmodus

Dieser Artikel enthält Inhalte zu js-Designmustern: Was ist das Zustandsmuster? Die Einführung in den js-Statusmodus hat einen gewissen Referenzwert. Ich hoffe, dass sie für Sie hilfreich ist.

Was ist der Statusmodus?

Definition : Kapseln Sie jeden Zustand innerhalb eines Dings in einer Klasse. Änderungen im internen Zustand führen zu unterschiedlichen Verhaltensweisen.

Hauptlösung: Das Verhalten eines Objekts hängt von seinem Zustand (seinen Eigenschaften) ab, und sein zugehöriges Verhalten kann entsprechend Änderungen seines Zustands geändert werden.

Verwendungszweck: Der Code enthält eine große Anzahl bedingter Anweisungen, die sich auf den Zustand des Objekts beziehen.

So lösen Sie: Abstrahieren Sie verschiedene spezifische Statusklassen.

Anwendungsbeispiele für den js-Zustandsmodus: 1. Beim Basketballspielen können Sportler normale, abnormale und übernormale Zustände haben. 2. In Zeng Hou Yis Glockenspiel ist „Glocke eine abstrakte Schnittstelle“, „Zhong A“ usw. sind konkrete Zustände und „Zeng Hou Yis Glockenspiel“ ist eine spezifische Umgebung (Kontext).

Vorteile des js-Statusmodus: 1. Kapselt Konvertierungsregeln. 2. Zählen Sie mögliche Zustände auf. Bevor Sie Zustände aufzählen, müssen Sie den Zustandstyp bestimmen. 3. Fügen Sie alle Verhaltensweisen, die sich auf einen bestimmten Zustand beziehen, in eine Klasse ein, und Sie können problemlos neue Zustände hinzufügen. Sie müssen nur den Objektstatus ändern, um das Verhalten des Objekts zu ändern. 4. Ermöglichen Sie die Integration der Zustandsübergangslogik in das Zustandsobjekt anstelle eines riesigen bedingten Anweisungsblocks. 5. Mehrere Umgebungsobjekte können ein Statusobjekt gemeinsam nutzen, wodurch die Anzahl der Objekte im System reduziert wird.

Nachteile des js-Statusmodus: 1. Die Verwendung des Statusmodus erhöht zwangsläufig die Anzahl der Systemklassen und -objekte. 2. Die Struktur und Implementierung des Statusmodus ist relativ komplex. Bei unsachgemäßer Verwendung führt dies zu Verwirrung in der Programmstruktur und im Code. 3. Der Statusmodus unterstützt das „Öffnungs- und Schließprinzip“ nicht sehr gut. Für den Statusmodus, der den Status wechseln kann, muss der für die Statuskonvertierung verantwortliche Quellcode geändert werden Zustand und die Änderung des Verhaltens einer bestimmten Zustandsklasse erfordern auch eine Änderung des Quellcodes der entsprechenden Klasse.

Js-Statusmodus-Nutzungsszenarien: 1. Szenarien, in denen sich das Verhalten ändert, wenn sich der Status ändert. 2. Ersetzung von Bedingungs- und Verzweigungsanweisungen.

Hinweis: Verwenden Sie das Zustandsmuster, wenn das Verhalten durch Zustände eingeschränkt wird und es nicht mehr als 5 Zustände gibt.

Szenendemo

Für eine elektrische Lampe einer bestimmten Marke drücken Sie die Taste einmal, um das schwache Licht einzuschalten, drücken Sie die Taste zweimal, um das starke Licht einzuschalten, und drücken Sie die Taste dreimal, um Mach das Licht aus.

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

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

Nicht objektorientierte Implementierung des Zustandsmusters

Mit Hilfe des Delegationsmechanismus von JavaScript kann das Zustandsmuster wie folgt implementiert werden:

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

Verwandte Empfehlungen:

JS-Designmuster: Was ist das Dekoratormuster? Einführung in das js-Dekoratormuster

js-Designmuster: Was ist das Mediatormuster? Einführung in den js-Mediator-Modus

Das obige ist der detaillierte Inhalt vonjs-Designmuster: Was ist ein Zustandsmuster? Einführung in den js-Statusmodus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!