JavaScriptと有限状態マシンの詳しい解説_基礎知識

* 状態（ステート）の総数には制限があります。
* いつでも、あなたは 1 つの状態だけです。
* 特定の条件下では、ある状態から別の状態に遷移します。

var menu = {

// 現在の状態
currentState: 'hide',

// バインドイベント
初期化: function() {
var self = this;
self.on("hover ", self.transition);
},

// 状態遷移
transition: function(event){
switch(this.currentState) {
case "hide":
This.currentState = 'show';
doSomething();
case "show":
doSome thing();
Break;
default:
console.log ('無効な状態!');
break;
}
}

} 🎜 >
ご覧のとおり、有限状態マシンの記述方法は明確なロジックと強力な表現力を備えており、イベントのカプセル化に役立ちます。オブジェクトが持つ状態が多くなり、発生するイベントが増えるほど、有限状態マシン記述の使用がより適切になります。

また、JavaScript 言語は非同期操作が多い言語です。一般的な解決策はコールバック関数を指定することですが、コード構造がわかりにくくなったり、テストやデバッグが困難になるなどの問題が発生します。有限状態マシンは、非同期操作をオブジェクトの状態変化にリンクするというより良い方法を提供します。非同期操作が終了すると、対応する状態変化が発生し、それが他の操作をトリガーします。これは、コールバック関数、イベント リスニング、パブリッシュ/サブスクライブなどのソリューションよりも論理的に合理的で、コードの複雑さを軽減するのが簡単です。

生成するときは、インスタンスの性質を記述するパラメータ オブジェクトを提供する必要があります。たとえば、信号機 (traffic light) は次のように記述できます:

イベント: [
{ 名前: '警告'、開始: '緑色'、終了: '黄色' }、
{ 名前: ' stop', from: ' yellow', to: 'red' },
{ name: 'ready', from: 'red', to: ' yellow' },
{ name: 'go', from : '黄'、次: '緑' }
]
});



信号機の初期状態は緑色で、イベント属性は状態変化をトリガーするさまざまなイベントです。たとえば、警告イベントは緑色の状態を黄色の状態に変更し、停止イベントは黄色の状態を に変更します。赤の状態など。

インスタンスを生成した後、いつでも現在のステータスをクエリできます。

JavaScript 有限状態マシンでは、warn イベントを例として、各イベントに 2 つのコールバック関数を指定できます。

同時に、緑色の状態を例として、各状態に 2 つのコールバック関数を指定することもできます。

warn イベントにより状態が緑から黄色に変化すると仮定すると、上記 4 種類のコールバック関数の発生順序は、onbeforewarn → onleavegreen → onenter yellow → onafterwarn となります。

イベントとステータスごとに個別のコールバック関数を指定するだけでなく、すべてのイベントとステータスに共通のコールバック関数を指定することもできます。

イベント コールバック関数に非同期操作 (サーバーとの Ajax 通信など) がある場合、状態が変化する前に非同期操作が終了するまで待機する必要がある場合があります。これには、transition メソッドを使用する必要があります。

上記のコードのコールバック関数には、非同期操作 (light.fadeOut) があります。状態をすぐに変更したくない場合は、コールバック関数に StateMachine.ASYNC オブジェクトを返させ、非同期操作が完了するまで状態が一時的に変更されないことを示してから、transition メソッドを呼び出して、変化する状態。

Javascript Finite State Machine では、現在の状態では発生し得ないイベントが発生したときに自動的にトリガーされるエラー処理関数を指定することもできます。

たとえば、現在のステータスが緑色の場合、理論的には現時点では警告イベントのみが発生する可能性があります。このときに停止イベントが発生すると、上記のエラー処理関数がトリガーされます。