js デザイン パターン: 状態パターンとは何ですか? JS ステート モードの概要

この記事では、JS デザイン パターンに関するコンテンツを提供します: 状態パターンとは何ですか? js ステータス モードの概要には一定の参考値があります。必要な方は参考にしていただければ幸いです。

ステートモードとは何ですか?

定義: モノの内部の各状態をクラスにカプセル化すると、内部状態の変化によって異なる動作が生成されます。

主な解決策: オブジェクトの動作はその状態 (プロパティ) に依存し、その状態の変化に応じて関連する動作を変更できます。

いつ使用するか: コードには、オブジェクトの状態に関連する多数の条件文が含まれています。

解決方法: さまざまな特定のステータスクラスを抽象化します。

JS 状態モードの適用例: 1. バスケットボールをプレイするとき、アスリートは通常状態、異常状態、超常状態を持つことができます。 2. Zeng Hou Yi のチャイムでは、「ベルは抽象的なインターフェイス」、「Zhong A」などは具体的な状態、「Zeng Hou Yi のチャイム」は特定の環境 (コンテキスト) です。

js state モードの利点: 1. 変換ルールをカプセル化します。 2. 考えられる状態を列挙します。状態を列挙する前に、状態のタイプを決定する必要があります。 3. 特定の状態に関連するすべての動作をクラスに入れると、オブジェクトの動作を変更するためにオブジェクトの状態を変更するだけで、新しい状態を簡単に追加できます。 4. 状態遷移ロジックを、巨大な条件文ブロックの代わりに状態オブジェクトと統合できるようにします。 5. 複数の環境オブジェクトが状態オブジェクトを共有できるため、システム内のオブジェクトの数が減ります。

js ステート モードの欠点: 1. ステート モードを使用すると、システム クラスとオブジェクトの数が必然的に増加します。 2. ステート モードの構造と実装は比較的複雑です。不適切に使用すると、プログラムの構造とコードが混乱する可能性があります。 3. 状態モードは、状態を切り替えることができる「開始および終了原理」をあまりサポートしていません。新しい状態クラスを追加するには、状態変換を担当するソース コードを変更する必要があります。そうしないと、新しい状態クラスに切り替えることができません。状態と変更 特定の状態クラスの動作には、対応するクラスのソース コードの変更も必要です。

js 状態モードの使用シナリオ: 1. 状態の変化に応じて動作が変化するシナリオ。 2. 条件文と分岐文の置き換え。

注: 動作が状態によって制限されており、状態が 5 つ以下である場合は、状態パターンを使用します。

シーンデモ

あるブランドの電灯、ボタンを1回押すと弱い光が点灯し、ボタンを2回押すと強い光が点灯し、ボタンを3回押すと光が消えます。

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

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

状態パターンの非オブジェクト指向実装

JavaScript の委任メカニズムを利用して、状態パターンを次のように実装できます:

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

関連推奨事項:

js デザイン パターン: デコレータ パターンとは? jsデコレーターパターンの紹介

jsデザインパターン: メディエーターパターンとは何ですか? JSメディエーターパターンの紹介

以上がjs デザイン パターン: 状態パターンとは何ですか? JS ステート モードの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。