簡単に言えば、3つの特性があります。
コードコピーは次のとおりです。
*州(州)の総数は限られています。
*いつでも、あなたは1つの状態にすぎません。
*特定の条件下では、ある状態から別の状態に移行します。
JavaScriptにとってそれが意味するのは、多くのオブジェクトが有限状態マシンとして記述できることです。
たとえば、Webページにメニュー要素があります。マウスがホバリングしているとき、メニューが表示されます。マウスが移動すると、メニューは隠されています。有限状態マシンの説明を使用する場合、このメニューには2つの状態(表示と非表示)のみがあり、マウスは状態の遷移をトリガーします。
コードは次のように記述できます。
コードコピーは次のとおりです。
var menu = {
//現在のステータス
currentState: 'Hide'、
//バインディングイベント
初期化:function(){
var self = this;
self.on( "Hover"、self.transition);
}、
//ステータストランジション
トランジション:function(event){
switch(this.currentState){
ケース「非表示」:
this.currentState = 'show';
dosomething();
壊す;
ケース「ショー」:
this.currentState = 'hide';
dosomething();
壊す;
デフォルト:
console.log( '無効な状態!');
壊す;
}
}
};
有限状態マシンの書き込み方法は、論理が明確であり、表現が強いことがわかります。これは、イベントのカプセル化を助長します。オブジェクトの状態が多いほど、イベントが多いほど、有限状態マシン作成方法を使用することがより適切です。
さらに、JavaScriptは、多くの非同期操作を持つ言語です。一般的に使用されるソリューションは、コールバック関数を指定することですが、これにより、コード構造の混乱、テストやデバッグなどの問題が発生します。有限状態マシンは、より良い方法を提供します。オブジェクトの状態変更と非同期操作をフックします。非同期操作が完了すると、対応する状態の変更が発生し、それにより他の操作がトリガーされます。これは、コールバック関数、イベントリスニング、公開/サブスクライブなどのソリューションよりも論理的に合理的であり、コードの複雑さを軽減するのが簡単です。
以下は、有限状態マシンライブラリ、JavaScript有限状態マシンです。このライブラリは非常に理解しやすく、理解を深めるのに役立ちます。その機能はまったく弱くありません。
このライブラリは、オブジェクトの作成方法を使用して有限状態マシンのインスタンスを生成するグローバルオブジェクトのステートマシンを提供します。
コードコピーは次のとおりです。
var fsm = statemachine.create();
生成するときは、インスタンスのプロパティを説明するためにパラメーターオブジェクトを提供する必要があります。たとえば、信号(信号機)は次のように説明できます。
コードコピーは次のとおりです。
var fsm = statemachine.create({
初期:「緑」、
イベント:[
{name: 'Warn'、from: 'green'、to: 'Yellow'}、
{name: 'Stop'、from: 'Yellow'、to: 'Red'}、
{name: 'ready'、from: 'red'、to: 'Yellow'}、
{name: 'go'、from: 'Yellow'、to: 'Green'}
]
});
信号の初期状態は緑です。イベント属性は、グリーン状態を黄色の状態にする警告イベント、停止イベントにより黄色の状態が赤状態になるなど、状態の変化を引き起こすさまざまなイベントです。
インスタンスを生成した後、いつでも現在のステータスを照会できます。
コードコピーは次のとおりです。
* fsm.current:現在のステータスを返します。
* fsm.is(s):状態が現在の状態であるかどうかを示すブール値を返します。
* fsm.can(e):現在の状態でイベントEをトリガーできるかどうかを示すブール値を返します。
* fsm.cannot(e):現在の状態でイベントEをトリガーできないかどうかを示すブール値を返します。
JavaScript Finite State Machineを使用すると、各イベントの2つのコールバック関数を指定でき、警告イベントを例に取ります。
コードコピーは次のとおりです。
* onbeforewarn:警告イベントが発生する前にトリガーされます。
* onafterwarn(Onwarnと略される可能性があります):ワーンイベントが発生した後にトリガーされます。
同時に、各状態の2つのコールバック関数を指定することもでき、グリーン状態を例にして取得します。
コードコピーは次のとおりです。
* OnLeaveGreen:緑の状態を離れるときにトリガーされます。
* onentergreen(grean緑色と略される可能性があります):緑の状態に入るときにトリガーされます。
警告イベントが状態を緑から黄色に変更すると仮定すると、上記の4種類のコールバック関数は次の順序で発生します。
各イベントと状態のコールバック関数を個別に指定することに加えて、すべてのイベントと状態の共通のコールバック関数を指定することもできます。
コードコピーは次のとおりです。
* onbeforevent:イベントが発生する前にトリガーされます。
* onevestate:州を離れるときにトリガーされます。
* OnenterState:いかなる状態に入るときにトリガーされます。
* onafterevent:いずれかのイベントが終了した後にトリガーされます。
イベントのコールバック関数(サーバーとのAJAX通信など)に非同期操作がある場合、州の変更が発生する前に非同期操作が終了するまで待つことをお勧めします。これには、遷移方法が必要です。
コードコピーは次のとおりです。
fsm.onwarn = function(){
light.fadeout( 'slow'、function(){
fsm.transition();
});
statemachine.asyncを返します。
};
上記のコードのコールバック関数には、非同期操作があります(light.fadeout)。状態をすぐに変更したくない場合は、コールバック関数にstatemachine.asyncオブジェクトを返す必要があります。非同期操作が完了するまで待ってから、遷移方法を呼び出して状態を変更します。
JavaScript Finite State Machineは、現在の状態で発生することができないイベントが自動的にトリガーされるエラー処理関数を指定することもできます。
コードコピーは次のとおりです。
var fsm = statemachine.create({
// ...
エラー:function(eventname、from、to、args、errorcode、errormessage){
return 'event' + eventname + ':' + errormessage;
}、
// ...
});
たとえば、現在の状態は緑であり、理論的には、現時点では警告イベントのみが発生する可能性があります。この時点で停止イベントが発生した場合、上記のエラー処理機能がトリガーされます。