ステート・モード

その内部状態が変更されたときにオブジェクトがその動作を変更することができます、オブジェクトは、そのクラスを変更することが表示されます。

簡単な説明：

ときに、オブジェクトの内部状態が変化する第1の部分は、別のカテゴリにパッケージの状態、および委譲そのオブジェクトの現在の状態への要求を意味し、変化が異なる挙動をもたらします。
第二部は、お客様の視点からのもので、我々が使用するオブジェクトは、異なる状態で非常に異なる動作を持って、オブジェクトが事実からインスタンス化別のクラスからのものであると表示される委員会の使用効果。

今すぐオンライン例のより与える、それは真のランプの一例である（ダウン見て我慢してください、気にしないでください）

// 首先定义了一个Light类
class Light {
  // 定义一个状态变量
  constructor(){
    this.state = 'off'
  }
  // 定义一个改变状态的方法
  change(){
    if(this.state === 'off'){
      console.log('开灯')
      this.state = 'on'
    } else {
      console.log('关灯')
      this.state = 'off'
    }
  }
}
// 创建实例
let light = new Light()
// 调用方法
light.change()

私たちは、ステートマシンを書かれている本をDangdangは、ロジックは、そう難攻不落のポイントがあるようで、まだ慎重に簡単です。しかし、あなたの人生はそんなに希望的観測ではありません、それは真実ではない知っています。人類の進展に伴い、需要が（デ）オフ酸化銅（CuO）（ジン）ステップ（カイ）に（●「◡」ではありません。●）、ライトが強力であることができ、新たなランプの出現ので、最初のクリック弱いです光、もう一度クリックして、カラフルな光をポイントして、[オフemmmポイントグレア。

上記を書くために、私たちのロジックによると、それが刺激する可能性があります。

まず、開閉の原則に違反して、それぞれの変更は、変更（）メソッドを変更する必要があり、処理を行うが不安定になります
状態スイッチが明らかにされていません、あなたはそこにどのように多くの州一目を理解することはできません
）状態との関係を切り替え、それ以外の文は、変更（で、あれば追加で（）メソッドを変更する方法は読んで維持することがより困難です

どのようにそれを行うには？~~~にハハ、「新しいライトが停滞することができますどのように、浮上している」ので、状態モデルに歌を歌うする方法

例としては、あまりにも退屈なのでランプので、私は一つの例を変更しましたが、それは同じことが降下を意味します。

  // 单曲循环类
  class SingleCycle{
    constructor(self){
      this._self = self
    }
    modeSwitch(){
      console.log('现在是单曲循环')
      this._self.setState( this._self.listCirculation )
    }
  }
  // 列表循环类
  class ListCirculation{
    constructor(self){
      this._self = self
    }
    modeSwitch(){
      console.log('现在是列表循环')
      this._self.setState( this._self.sequentialPlay )
    }
  }
  // 顺序播放类
  class SequentialPlay{
    constructor(self){
      this._self = self
    }
    modeSwitch(){
      console.log('现在是顺序播放')
      this._self.setState( this._self.shufflePlay )
    }
  }
  // 随机播放类
  class ShufflePlay{
    constructor(self){
      this._self = self
    }
    modeSwitch(){
      console.log('现在是随机播放')
      this._self.setState( this._self.singleCycle )
    }
  }
  // 音乐类
  class Music{
    constructor(){
      // 为每个状态都创建一个状态对象
      this.singleCycle = new SingleCycle(this)
      this.listCirculation = new ListCirculation(this)
      this.sequentialPlay = new SequentialPlay(this)
      this.shufflePlay = new ShufflePlay(this)
      // 定义初始状态为顺序播放
      this.currState = this.sequentialPlay
    }
    // 切换播放模式
    changeMode(){
      this.currState.modeSwitch()
    }
    // 下一次点击时的播放状态
    setState(newState){
      this.currState = newState;
    }
  }
  // 实例化音乐类
  let music = new Music()
  // 调用切换播放模式方法
  music.changeMode()

あなたが失われた無知であれば、下を見、良いリッピングする必要がない場合はまあ、我々は、この完成に適応します：

まず、4つの状態クラスを定義しSingleCycle（单曲循环）、ListCirculation（列表循环）、SequentialPlay（顺序播放）、ShufflePlay（随机播放）
各クラスは、状態変数を定義して_self受信するようにMusic（音乐类）上を通過するthis方法があり、modeSwitch（状态更改）状態を変更するための次回再生します、
次に定義するMusic（音乐类）オブジェクトの状態を作成した各状態のための最初の内部を、だけでなく、変数を定義するcurrState次のクリックの状態を記録します。
最後の二つの方法が定義された内部の音楽（ミュージカル）でchangeMode（切换播放模式）、setState（下一次点击时的播放状态）。するとき、私たちは、トグルモードをクリックするとchangeMode（切换播放模式）呼び出す前にクラス定義に良好な状態modeSwitch（状态更改）メソッドを呼び出すために、モード切替は、音楽に同じ時間（音楽の授業）で終了しsetState（下一次点击时的播放状态）、シングルクリックを確実に異なる時間に状態スイッチに変更を作る方法モード。

上記の方法で見ることができるように。

私たちはできるMusic（音乐类）一方で、明らかに、全体の状態でどのように多くの知らないMusic（音乐类）、もはや実質的な操作を実行しますが、によりthis.currState.modeSwitch()、現在開催されたオブジェクトの実行状態に行くのは、
法律スイッチング状態はよくで、状態の各クラスのために事前に定義されているMusic（音乐类）スイッチの無い状態と条件分岐文を関連付けられています

静かに彼は再び完璧少しYoのために広いまた、上記の方法を述べました

小さな拡大

私たちは、各状態のクラスを学んだ上の説明を通して持ってmodeSwitch()、我々は状態を追加するたびにクラスメソッドを記述する必要があることを意味する方法を、質問は、人々はあまりにも誤られていませんか？だから、毛布は、必然的にそれを失うことになります！

その後、いくつかの小さな最適化を行います。

// 定义一个State类
class State{
  constructor(self){
    this._self = self
  }
  modeSwitch(){
   throw new Error( '父类的 modeSwitch 方法必须被重写' )
  }
}

// 状态类（举一个为例）

// 单曲循环类（继承State类）
class SingleCycle extends State{
  modeSwitch(){
    console.log('现在是单曲循环')
    this._self.setState( this._self.listCirculation )
  }
}

1日私達は方法を書くのを忘れたときによく完成し、すぐにエラーを見つけることが可能です

現在の理解のための状態モデルはあまり後に更新していきます新たな理解を持っている、と滑っが滑っ（〜¯▽¯）〜

JSデザインパターン - 状態モード

ステート・モード

小さな拡大

おすすめ