33

ステートマシンの JavaScript 実装を知っている人はいますか? 私の目標は、イベントを状態遷移にバインドするステート マシンの実装をセットアップすることです。したがって、ユーザーがボタンをクリックすると、状態が変更され、この状態によって、たとえば変更されるオブジェクトの特定の値が定義される場合があります。

特定のイベントが呼び出されたときにさまざまなオブジェクトのどの値が変化するかを指示できるルールjsonファイルがあるため、これをステートマシンにしたいだけです。これはファイル内で構造化されるため、その情報をステート マシン オブジェクトに解析するのは簡単だと思います。

4

10 に答える 10

37

js には、有限状態マシン用の 2 つの主要なライブラリがあります。

1/ Machina : 非常によく文書化された例であり、2 つの JavaScript メッセージ バス プロバイダーをすぐにサポートしています: postal.jsとmplify.js。

2/ Javascript ステート マシン: シンプルで使いやすく、「基本的な」用途に最適です。

于 2013-03-26T15:58:50.247 に答える
6

私は最近、JS でステート マシンの実装を構築しました。これは、移行 DSL のおかげで、確かに構成が最も簡単です。

transitions: [
  'next    : intro > form > finish',
  'back    : intro < form           < error',
  'error   :         form >           error',
  'restart : intro        < finish'
]

構成とイベント ハンドラーの割り当ての両方で非常に柔軟です。実行時に状態を追加および削除したり、遷移を一時停止および再開したり、多数のイベントにフックしたり、jQuery のヘルパーや Vue などのリアクティブ フレームワークを使用したりできます。

ステートマシンのデモ

ドキュメントと多数のデモがここにあります:

于 2016-12-23T20:07:40.580 に答える
4

ステート マシンのちょっとしたプロモーション: stateflow 自分にとって十分にシンプルなステート マシンが見つからなかったため、独自のステート マシンを作成しました。

フローは、プロパティが状態名で、値が次のプロパティを持つ別の js オブジェクトである js オブジェクトで定義されます。

  • タイプ: begin、end または state (デフォルト)。
  • action: これに設定された State インスタンス オブジェクトを持つ関数は、以前に登録された action または別のフロー定義 (この場合はサブフロー) という名前にすることもできます。
  • on: プロパティはイベントに一致し、値は次に進むべき状態です

簡単な例

var stateflow = require('stateflow');
var flow = new stateflow.StateFlow({
   a: {
       type:'begin',
       action: function(complete) {
           // do something
           complete('done');    
       },
       on: {
           done:'b',
           again:'a'
       }
   }, 
   b: {
       type:'end',
       action: function(complete) {
           complete('finished');
       }
   }
});
flow.start(function(event) {
   console.log('flow result:', event);
});

git https://github.com/philipdev/stateflowまたは npmで確認してください。

于 2015-01-26T18:58:32.907 に答える
3

https://github.com/steelbreeze/state.jsを見てみてください- UML 2 仕様で説明されているように、ステート マシンのセマンティクスの多くをサポートしながら、パフォーマンスを維持しています。ドキュメントはまだあまり多くありませんが、サンプルとテストは参考になるはずです。

于 2013-06-06T08:45:53.273 に答える
2

探していることを実行し、イベントを自動的にバインドするように見える jQuery で設計されたライブラリが見つかります。

于 2014-09-03T23:33:55.940 に答える
1

js-fsm マイクロ ライブラリでこれを選択します。

特徴

  • 状態ベースの FSM の説明。と状態遷移の配列で構成される状態。
  • イベントからの移行。複数のイベントは、ORed イベントを定義します。
  • 条件からの移行。条件は、条件オブジェクトで一致する必要があるキーと値のペアです。複数のキーと値のペアが AND 条件で定義されています。複数の条件で ORed 条件を定義
  • 各トランジションは、必要に応じてアクションまたは複数のアクションを呼び出すことができます。アクションはオプションで引数を持つか、this のメンバーにすることができます。
  • ステート マシンは、既存のオブジェクトまたはコンストラクターのプロトタイプに (ミックスインとして) 混在させることができます。このためのメソッドが提供されます。
  • ステート マシンは、ログ メソッドが存在するか提供されている場合、オプションでログを記録できます。
  • AMD および Node モジュールがサポートされています。
  • QUnit を使用した単体テスト。

js-fsm github ページ。

于 2014-03-28T17:31:14.497 に答える