@2toad/fluent-state 中文文档教程

Question

Fluent State

流畅的 JavaScript 状态机（支持 TypeScript）

Getting Started

安装包

npm i @2toad/fluent-state

Usage

import { fluentState } from '@2toad/fluent-state';
// or
var fluentState = require('@2toad/fluent-state').fluentState;

fluentState
  .from('vegetable').to('diced').or('pickled')
  .from('diced').to('salad').or('trash');

fluentState
  .when('diced').do(() => console.log('diced'));

fluenState.transition('diced');
// or
fluenState.next();

API

Properties

state: State;

当前状态

Methods

from(name: string): State

添加状态

// Add the 'vegetable' state
fluentState.from('vegetable');

to(name: string): Transition

添加状态转换

fluentState
  .from('vegetable') // Add the 'vegetable' state
  .to('diced');      // add the 'diced' state, with a transtion from 'vegetable'

or(name: string): Transition

添加状态转换

fluentState
  .from('vegetable') // Add the 'vegetable' state
  .to('diced')       // add the 'diced' state, with a transtion from 'vegetable'
  .or('pickled')     // add the 'pickled' state, with a transtion from 'vegetable'
  .or('discarded');  // add the 'discarded' state, with a transtion from 'vegetable'

setState(name: string): void

显式设置状态而不触发转换

fluentState.setState('diced');

注意：状态最初设置为您通过 from() 添加的第一个状态，并且在您通过 transition() 或 转换到新状态时隐式设置next()

has(name: string): boolean {

如果状态存在，则返回 true

fluentState.has('vegetable');

remove(name: string): void

删除状态（及其所有转换）

fluentState.remove('vegetable');

clear(): void

删除所有状态

fluentState.clear();

transition(…names: string[]): boolean

• Transitions to another state.
• If multiple states are specified, a state is chosen at random.
• Returns true upon success.

// Transition to the 'diced' state
fluentState.transition('diced');

// Transition to the 'diced' or 'discarded' state (selected at random)
fluentState.transition('diced', 'discarded');

next(…exclude: string[]): boolean

• If the current state contains a single transition, that state is transitioned to.
• If the current state contains multiple transitions, a transition is selected at random.
• With the option to exclude specified states from the random selection.
• Returns true upon success.

fluentState.next();

// A random state, excluding 'pickled' and 'discarded'
fluentState.next('pickled', 'discarded');

Callbacks

您可以向任何状态添加回调

when(name: string): Event

指定要向其添加回调的状态

fluentState.when('diced');

do(handler: (previousState: State, fluentState: FluentState) => any): Handler

添加回调

fluentState
  .when('diced')
  .do((previousState, fluentState) => {
    console.log(`Transitioned from "${previousState.name}"`);
  });

and(handler: (previousState: State, fluentState: FluentState) => any): Handler

添加另一个回调

fluentState
  .when('diced')
  .do(() => console.log('Transitioned to "diced"'))
  .and((previousState, fluentState) => {
    console.log(`Transitioned from "${previousState.name}"`);
  });

并且当然，它都是可链接的。

fluentState
  .when('diced').do(() => console.log('Transitioned to "diced"'))
  .when('pickled').do(() => console.log('Transitioned to "pickled"'));

Lifecycle

您可以通过 observe 方法连接到状态机生命周期。

fluentState.observe(Lifecycle.BeforeTransition, (currentState, newState) => {
  // You can prevent the transition by returning false from this event
  return false;
});

// Chainable
fluentState
  .observe(Lifecycle.TransitionFailed, () => console.log('Transition failed'))
  .observe(Lifecycle.TransitionFailed, () => console.log('Multiple hooks allowed on each event'))
  .observe(Lifecycle.AfterTransition, () => console.log('Transition complete'));

Events

1. BeforeTransition: (currentState: State, newState: string) => { /* return false to stop the lifecycle */ }
2. TransitionFailed: (currentState: State, newState: string) => {}
3. AfterTransition: (previousState: State, currentState: State) => {}