探索FSM （有限狀態(tài)機）應用

有限狀態(tài)機（FSM） 是計算機科學中的一種數(shù)學模型，可用于表示和控制系統(tǒng)的行為夏块。它由一組狀態(tài)以及定義在這些狀態(tài)上的轉換函數(shù)組成北专。FSM 被廣泛用于計算機程序中的狀態(tài)機制。

有限狀態(tài)機（FSM）應用場景

在各種自動化系統(tǒng)的應用： 例如交通信號燈、地鐵站的旋轉閘門、銀行自動取款機等违孝。通過對狀態(tài)和轉換函數(shù)的定義膏燕，可以實現(xiàn)對系統(tǒng)行為的精確控制。

交通信號燈狀態(tài)流轉圖

地鐵站的旋轉閘門狀態(tài)流轉圖

銀行自動取款機狀態(tài)流轉圖

在編程領域的應用： 例如在編寫編譯器和解釋器時，可以使用有限狀態(tài)機（FSM) 來處理詞法分析。例如：JSON.Parse
在Notion中應用： 可以使用 有限狀態(tài)機（FSM) 的相關概念來構建各種工作流程，例如狀態(tài)轉換圖睡榆、狀態(tài)轉換表等。
在web中應用： 我們熟悉的 Promise 也是一個狀態(tài)機袍榆，具有三個狀態(tài)：pending胀屿、resolved。rejected蜡塌。

Promise狀態(tài)流轉圖

登錄功能流轉圖

類似這樣的狀態(tài)機的例子數(shù)不勝數(shù)碉纳，甚至于，人也是一種極其復雜的狀態(tài)機馏艾，給定一種刺激或多種刺激組合劳曹，也會觸發(fā)人從某種狀態(tài)過渡到另一種狀態(tài)奴愉。只不過復雜程度極高，以至于現(xiàn)代科學完全無法解密這種狀態(tài)機铁孵。

有限狀態(tài)機（FSM）實現(xiàn)原理

具體來說锭硼，F(xiàn)SM由以下幾部分組成：

初始狀態(tài)：系統(tǒng)的初始狀態(tài)。
狀態(tài)集合：表示系統(tǒng)可能處于的各種狀態(tài)蜕劝。
轉移函數(shù)：定義系統(tǒng)在不同狀態(tài)之間的轉移條件和結果檀头。
終止狀態(tài)：系統(tǒng)在某個狀態(tài)下可以停止計算。

有限狀態(tài)機(FSM) 的實現(xiàn)基于狀態(tài)轉移圖岖沛。狀態(tài)轉移圖 是一個有向圖暑始，它表示有限狀態(tài)機(FSM) 中狀態(tài)之間的轉移關系。在狀態(tài)轉移圖中婴削，每個狀態(tài)表示系統(tǒng)的某種狀態(tài)廊镜，每個轉移表示系統(tǒng)從一個狀態(tài)轉移到另一個狀態(tài)的條件和結果。

實現(xiàn)簡易的有限狀態(tài)機（FSM）

實現(xiàn)步驟

當狀態(tài)機開始執(zhí)行時唉俗，它會自動進入初始化狀態(tài)（initial state）嗤朴。
每個狀態(tài)都可以定義，在進入（onEnter）或退出（onExit）該狀態(tài)時發(fā)生的行為事件（actions）虫溜，通常這些行為事件會攜帶副作用（side effect）雹姊。
每個狀態(tài)都可以定義觸發(fā)轉換（transition）的事件。
轉換定義了在退出一個狀態(tài)并進入另一個狀態(tài)時衡楞，狀態(tài)機該如何處理這種事件吱雏。
在狀態(tài)轉換發(fā)生時，可以定義可以觸發(fā)的行為事件寺酪，從而一般用來表達其副作用坎背。

狀態(tài)轉移圖

function createMachine(stateMachineDefinition) {
  const machine = {
    value: stateMachineDefinition.initialState,
    performTransition(currentState, event) {
      const currentStateDefinition = stateMachineDefinition[currentState];
      const destinationTransition = currentStateDefinition.transitions[event];
      if (!destinationTransition) {
        return;
      }
      const destinationState = destinationTransition.target;
      const destinationStateDefinition =
        stateMachineDefinition[destinationState];

      destinationTransition.action();
      currentStateDefinition.actions.onExit();
      destinationStateDefinition.actions.onEnter();

      machine.value = destinationState;

      return machine.value;
    },
  };
  return machine;
}

const machine = createMachine({
  initialState: "off",
  off: {
    actions: {
      onEnter() {
        console.log("off: onEnter");
      },
      onExit() {
        console.log("off: onExit");
      },
    },
    transitions: {
      switch: {
        target: "on",
        action() {
          console.log('transition action for "switch" in "off" state');
        },
      },
    },
  },
  on: {
    actions: {
      onEnter() {
        console.log("on: onEnter");
      },
      onExit() {
        console.log("on: onExit");
      },
    },
    transitions: {
      switch: {
        target: "off",
        action() {
          console.log('transition action for "switch" in "on" state');
        },
      },
    },
  },
});

let state = machine.value;
console.log(`current state: ${state}`);
state = machine.performTransition(state, "switch");
console.log(`current state: ${state}`);
state = machine.performTransition(state, "switch");
console.log(`current state: ${state}`);

有限狀態(tài)機（FSM）的應用實現(xiàn)

在狀態(tài)比較多的情況下，把狀態(tài)寄雀、事件及 transitions 集中到一個狀態(tài)機中，進行統(tǒng)一管理陨献。這樣不需要寫太多的 if-else盒犹，或者 case 判斷，如果增加狀態(tài)和事件眨业，也便于代碼的維護和擴展急膀。

文本解析器

實現(xiàn)思路

確定狀態(tài)和輸入
在編寫 FSM 之前，我們需要確定我們的狀態(tài)和輸入龄捡。在這個例子中卓嫂，我們將定義三個狀態(tài)：起始狀態(tài)、數(shù)字狀態(tài)和字符串狀態(tài)聘殖。我們還將定義四個輸入：數(shù)字晨雳、字母行瑞、引號和空格。
定義狀態(tài)機類
現(xiàn)在餐禁，我們可以編寫代碼來實現(xiàn)我們的 FSM 血久。我們需要定義一個狀態(tài)機類，它將接受輸入帮非，并根據(jù)轉移規(guī)則轉換狀態(tài)氧吐。該類應該包含以下屬性：
- currentState：當前狀態(tài)。
- states：狀態(tài)列表末盔。
- transitions：轉移列表筑舅。
  它還應該包含以下方法：
- transition：該方法接受一個輸入參數(shù) input，根據(jù)當前狀態(tài)以及輸入參數(shù)陨舱，執(zhí)行相應的狀態(tài)轉換翠拣。
定義轉移規(guī)則
我們還需要定義狀態(tài)之間的轉移規(guī)則。為此隅忿，我們將使用轉移列表心剥，其中包含狀態(tài)之間的映射和輸入。轉移規(guī)則應該考慮當前狀態(tài)和輸入背桐，并根據(jù)它們確定下一個狀態(tài)优烧。如果當前狀態(tài)和輸入沒有匹配的轉移規(guī)則，則應該拋出一個異常链峭。
解析文本
現(xiàn)在畦娄，我們可以使用狀態(tài)機解析文本。我們需要將文本拆分為單詞弊仪，并將每個單詞作為輸入提供給狀態(tài)機熙卡。在處理完所有輸入后，我們可以通過調用 getInputType 方法來獲取解析的令牌励饵。

示例代碼

const STATES = {
  START: "start",
  NUMBER: "number",
  STRING: "string",
};

const INPUTS = {
  NUMBER: "number",
  LETTER: "letter",
  SPACE: "space",
  QUOTE: "quote",
};

const TRANSITIONS = [
  {
    currentState: STATES.START,
    input: INPUTS.NUMBER,
    nextState: STATES.NUMBER,
  },
  {
    currentState: STATES.START,
    input: INPUTS.LETTER,
    nextState: STATES.STRING,
  },
  { currentState: STATES.START, input: INPUTS.SPACE, nextState: STATES.START },
  { currentState: STATES.START, input: INPUTS.QUOTE, nextState: STATES.STRING },
  {
    currentState: STATES.NUMBER,
    input: INPUTS.NUMBER,
    nextState: STATES.NUMBER,
  },
  { currentState: STATES.NUMBER, input: INPUTS.SPACE, nextState: STATES.START },
  {
    currentState: STATES.STRING,
    input: INPUTS.LETTER,
    nextState: STATES.STRING,
  },
  { currentState: STATES.STRING, input: INPUTS.SPACE, nextState: STATES.START },
  { currentState: STATES.STRING, input: INPUTS.QUOTE, nextState: STATES.START },
];

class TextParse {
  constructor() {
    this.currentState = STATES.START;
    this.buffer = "";
    this.type;
  }

  performTransition(input) {
    const transition = TRANSITIONS.find(
      (t) => t.currentState === this.currentState && t.input === input.type
    );
    if (!transition)
      throw new Error(
        `Invalid input "${input.value}" for state "${this.currentState}"`
      );

    this.currentState = transition.nextState;

    if (this.currentState === STATES.START) {
      const token = this.buffer;
      const type = this.type;
      this.buffer = "";
      this.type = "";
      return {
        type,
        value: token,
      };
    } else {
      this.buffer += input.value;
      this.type = input.type;
    }
  }
}

function textParse(input) {
  const textParse = new TextParse();
  const tokens = [];

  for (let i = 0; i < input.length; i++) {
    const char = input[i];

    try {
      const token = textParse.performTransition({
        type: getInputType(char),
        value: char,
      });

      if (token) {
        tokens.push(token);
      }
    } catch (e) {
      console.error(e.message);
      return null;
    }
  }

    const lastToken = textParse.performTransition({ type: INPUTS.SPACE });

  if (lastToken) {
    tokens.push(lastToken);
  }

  return tokens;
}

function getInputType(char) {
  if (/[0-9]/.test(char)) {
    return INPUTS.NUMBER;
  } else if (/[a-zA-Z]/.test(char)) {
    return INPUTS.LETTER;
  } else if (/[\s\n\t\r]/.test(char)) {
    return INPUTS.SPACE;
  } else if (char === '"') {
    return INPUTS.QUOTE;
  } else {
    throw new Error(`Unknown input type for "${char}"`);
  }
}

// Example usage:
console.log(textParse('123 abc "def ghi" 456')); 
// [
//   { type: 'number', value: '123' },
//   { type: 'letter', value: 'abc' },
//   { type: 'letter', value: '"def' },
//   { type: 'letter', value: 'ghi' },
//   { type: '', value: '' },
//   { type: 'number', value: '456' }
// ]

示例代碼

web 應用

使用 有限狀態(tài)機（FSM） 結合 React 構建 web 應用驳癌，不局限于身份認證，登錄役听，步驟表單颓鲜，有蠻多 web 應用在
有限狀態(tài)機（FSM）的實踐 ，下面主要描述 從有限狀態(tài)機（FSM）在服務端拉取數(shù)據(jù)的狀態(tài)轉移上的應用

狀態(tài)轉移圖

狀態(tài)集（States）, 轉換規(guī)則（Transitions）

const states = {
  INITIAL: "idle",
  LOADING: "loading",
  SUCCESS: "success",
  FAILURE: "failure",
};

const transitions = {
  [states.INITIAL]: {
    fetch: () => /* Returns states.LOADING */,
  },

  [states.LOADING]: {},

  [states.SUCCESS]: {
    reload: () => /* Returns states.LOADING */,
    clear: () => /* Returns states.INITIAL */,
  },

  [states.FAILURE]: {
    retry: () => /* Returns states.LOADING */,
    clear: () => /* Returns states.INITIAL */,
  },
}