Машина состояния события JavaScript

Ответ 1

В js есть две основные библиотеки для конечного автомата:

1/Machina: примеры, очень хорошо документированные, поддерживают двух провайдеров шины сообщений JavaScript из коробки: postal.js и ampify.js.

2/Javascript State Machine: проще и проще в использовании, идеально подходит для "базовых" целей.

Ответ 2

Недавно я создал реализацию конечного автомата в JS, которую, безусловно, проще всего настроить благодаря переходному DSL:

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

Он действительно гибок как в настройке, так и в назначении обработчиков событий, вы можете добавлять и удалять состояния во время выполнения, приостанавливать и возобновлять переходы, подключаться к куче событий, с помощью помощников для jQuery и реактивных сред, таких как Vue:

Документы и целый ряд демонстраций здесь:

• http://statemachine.davestewart.io

Ответ 3

Немного продвигается для моего автомата: stateflow Я просто создал свой собственный конечный автомат, потому что не нашел ни одного, который был бы достаточно простым для меня.

поток определяется с помощью объекта js, где свойство является именем состояния, а значением является другой объект js со следующими свойствами.

• тип: начало, конец или состояние (по умолчанию).
• действие: функция с объектом экземпляра состояния, установленным для этого, также может быть названа действием, ранее зарегистрированным или другим определением потока, в этом случае это субпоток.
• on: свойство должно быть сопоставлено событию, а значение - следующим состоянием goto

Простой пример

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

Ответ 4

Попробуйте взглянуть на https://github.com/steelbreeze/state.js - он поддерживает большую часть семантики конечного автомата, как описано в спецификации UML 2, при этом все еще выполняется, Там пока не так много документов, но примеры и тесты должны служить хорошей ссылкой.

Ответ 5

Вы найдете библиотеку, разработанную с помощью jQuery, которая, похоже, делает то, что вы ищете, и автоматически связывает события для вас:

• https://github.com/lucaong/jquery-machine (см. пример https://github.com/lucaong/jquery-machine/blob/master/examples/onoff.html)
• https://github.com/intersel/iFSM (см. пример https://github.com/intersel/iFSM/blob/master/Examples/Example_1.html)

Ответ 6

Мой выбор с помощью микро-библиотеки js-fsm.

Функции

• Описание FSM на основе штата. Состояние, состоящее из массива переходов состояний и массива.
• Переход от событий. Несколько событий определяют события ORed.
• Переход от условий. Условие - это пара ключей: значение, которое должно совпадать с объектом условия. Множественные пары ключей, значений определены как условия AND. Несколько условий определяют условия ORed.
• Каждый переход может произвольно вызывать действия или несколько действий. Действия могут необязательно иметь аргументы или быть членами этого.
• Государственный аппарат может быть смешан (как mixin) с существующим объектом или прототипом конструктора. Предоставляется метод для этого.
• Конечный автомат может запросить журнал, если существует метод журнала в этом случае или предоставляется.
• Поддерживаются модули AMD и Node.
• Единичные тесты с помощью QUnit.

страница js-fsm github.

Ответ 7

Я думал, что я также буду говорить о моей собственной библиотеке конечного автомата. Я пришел к такому вопросу два года назад и не смог найти ничего, что соответствовало бы моим требованиям, поэтому я написал state-transducer.

Основными задачами для API было:

• функциональный API, полностью лишенный эффекта, с инкапсулированным внутренним состоянием
• универсальность и возможность повторного использования (не предусмотрено положение, учитывающее конкретные варианты использования или структуры)
• должна быть возможность добавить механизм параллелизма и/или связи поверх текущего проекта
• должна быть возможность плавной интеграции в React, Angular и ваши популярные фреймворки

Используется для моделирования пользовательских интерфейсов, превращения пользовательских потоков

в конечные автоматы

Ответ 8

Вы можете найти эту библиотеку:

https://www.npmjs.com/package/mistic

Отказ от ответственности: я поддерживаю его.

Ответ 9

AsyncMachine - это другой, менее ортодоксальный подход к государственной машине в JS (я автор). Он реляционный и поддерживает одновременную активность нескольких состояний. Вот некоторый код для ответа на ваш первоначальный вопрос - после нажатия кнопки появляются побочные эффекты с точки зрения нового состояния и атрибута для объекта контекста:

const {
  machine
} = asyncmachine
// define states & relations
const state = {
  Clicked: {
    add: ['ShowFooter']
  },
  ShowFooter: {}
}
const example = machine(state)
// define handlers
example.Clicked_state = function() {
  this.timeout = setTimeout(
    this.dropByListener('Clicked'), 3000)
}

function render() {
  console.log('render')
  // get all the active state as class names
  const classes = example.is().join(' ')
  console.log(classes)
  document.getElementById('content').innerHTML = '
    <div class="${classes}">
      <button>CLICK</button>
      <footer>FOOTER</footer>
    </div>
  '
}
document.getElementById('content').addEventListener(
  'click', example.addByListener('Clicked'))
// bind render to any state change
example.on('tick', render)
render()

.Clicked button {
  background: red;
}

footer {
  display: none;
}

.ShowFooter footer {
  display: block
}

<script src="https://unpkg.com/[email protected]/dist/asyncmachine.umd.js"></script>
<div id='content' />

Ответ 10

Новая библиотека: https://github.com/jml6m/fas-js - проста и удобна в использовании

В README также есть демо.