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

簡単に言えば、3 つの特徴があります:

コードをコピー コードは次のとおりです:

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

JavaScript にとってこれが意味するのは、多くのオブジェクトを有限状態マシンとして記述できるということです。

たとえば、Web ページにメニュー要素があります。マウスをホバリングするとメニューが表示され、マウスを離すとメニューが非表示になります。有限状態マシンを使用して説明すると、このメニューには 2 つの状態 (表示と非表示) しかなく、マウスによって状態遷移が発生します。

コードは次のように記述できます:

コードをコピー コードは次のとおりです。

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

以下では、有限状態マシン関数ライブラリ Javascript Finite State Machine を紹介します。このライブラリは非常に分かりやすく、理解を深めることができ、機能も決して弱いものではありません。

このライブラリは、グローバル オブジェクト StateMachine を提供します。このオブジェクトの create メソッドを使用して、有限状態マシンのインスタンスを生成できます。

コードをコピー

コードは次のとおりです。var fsm = StateMachine.create();

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

コードをコピーします

コードは次のとおりです。var fsm = StateMachine.create({初期: '緑'、

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



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

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

コードをコピー

コードは次のとおりです: * fsm.current: 現在の状態を返します。 。 * fsm.is(s): 状態 s が現在の状態かどうかを示すブール値を返します。 * fsm.can(e): 現在の状態でイベント e をトリガーできるかどうかを示すブール値を返します。

* fsm.cannot(e): 現在の状態でイベント e をトリガーできないかどうかを示すブール値を返します。

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

コードをコピーします コードは次のとおりです:

* onbeforewarn: 警告イベントが発生する前にトリガーされます。 。
* onafterwarn (onwarn と省略できます): warn イベントの発生後にトリガーされます。

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

コードをコピーします コードは次のとおりです:

* onleavegreen: 緑色の状態を終了するときにトリガーされます。 。
* onentergreen (ongreen と省略可能): 緑色の状態になるとトリガーされます。

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

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

コードをコピー コードは次のとおりです。

* onbeforeevent: イベントが発生する前にトリガーされます。
* onleavestate: 任意の状態を離れるときにトリガーされます。
* onenterstate: 任意の状態に入るときにトリガーされます。
* onafterevent: イベントの終了後にトリガーされます。

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

コードをコピー コードは次のとおりです。

fsm.onwarn = function(){
light .fadeOut('slow', function() {
fsm.transition();
});
return StateMachine.ASYNC;
};

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

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

コードをコピーします コードは次のとおりです。

var fsm = StateMachine.create({
/ / ...
error: function(eventName, from, to, args, errorCode, errorMessage) {
return 'event 'eventName ': ' errorMessage;
},
// ...
});

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