探索FSM （有限狀態機）應用

来源:https://www.cnblogs.com/dtux/archive/2023/04/20/17337720.html
-Advertisement-
Play Games

我們是袋鼠雲數棧 UED 團隊，致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神，探索前端道路，為社區積累並傳播經驗價值。。 本文作者：木杪 有限狀態機（FSM） 是電腦科學中的一種數學模型，可用於表示和控制系統的行為。它由一組狀態以及定義在這些狀態上的轉換函數組成。FSM 被廣泛用於計算 ...


我們是袋鼠雲數棧 UED 團隊，致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神，探索前端道路，為社區積累並傳播經驗價值。。

本文作者：木杪

有限狀態機（FSM） 是電腦科學中的一種數學模型，可用於表示和控制系統的行為。它由一組狀態以及定義在這些狀態上的轉換函數組成。FSM 被廣泛用於電腦程式中的狀態機制。

有限狀態機（FSM）應用場景

  • 在各種自動化系統的應用： 例如交通信號燈、地鐵站的旋轉閘門、銀行自動取款機等。通過對狀態和轉換函數的定義，可以實現對系統行為的精確控制。

    交通信號燈狀態流轉圖

    file

    地鐵站的旋轉閘門狀態流轉圖

    file

    銀行自動取款機狀態流轉圖

    file

  • 在編程領域的應用： 例如在編寫編譯器和解釋器時，可以使用有限狀態機（FSM) 來處理詞法分析。例如：JSON.Parse

  • 在Notion中應用： 可以使用 有限狀態機（FSM) 的相關概念來構建各種工作流程，例如狀態轉換圖、狀態轉換表等。

  • 在web中應用： 我們熟悉的 Promise 也是一個狀態機，具有三個狀態：pending、resolved。rejected。

    Promise狀態流轉圖

    file

    登錄功能流轉圖

    file

類似這樣的狀態機的例子數不勝數，甚至於，人也是一種極其複雜的狀態機，給定一種刺激或多種刺激組合，也會觸發人從某種狀態過渡到另一種狀態。只不過複雜程度極高，以至於現代科學完全無法解密這種狀態機。

有限狀態機（FSM）實現原理

具體來說，FSM由以下幾部分組成：

  • 初始狀態：系統的初始狀態。
  • 狀態集合：表示系統可能處於的各種狀態。
  • 轉移函數：定義系統在不同狀態之間的轉移條件和結果。
  • 終止狀態：系統在某個狀態下可以停止計算。

有限狀態機(FSM) 的實現基於狀態轉移圖。狀態轉移圖 是一個有向圖，它表示有限狀態機(FSM) 中狀態之間的轉移關係。在狀態轉移圖中，每個狀態表示系統的某種狀態，每個轉移表示系統從一個狀態轉移到另一個狀態的條件和結果。

實現簡易的有限狀態機（FSM）

實現步驟

  • 當狀態機開始執行時，它會自動進入初始化狀態（initial state）。
  • 每個狀態都可以定義，在進入（onEnter）或退出（onExit）該狀態時發生的行為事件（actions），通常這些行為事件會攜帶副作用（side effect）。
  • 每個狀態都可以定義觸發轉換（transition）的事件。
  • 轉換定義了在退出一個狀態併進入另一個狀態時，狀態機該如何處理這種事件。
  • 在狀態轉換髮生時，可以定義可以觸發的行為事件，從而一般用來表達其副作用。

狀態轉移圖

file

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}`);

有限狀態機（FSM）的 應用實現

在狀態比較多的情況下，把狀態、事件及 transitions 集中到一個狀態機中，進行統一管理。這樣不需要寫太多的 if-else，或者 case 判斷，如果增加狀態和事件，也便於代碼的維護和擴展。

文本解析器

實現思路

  • 確定狀態和輸入
    在編寫 FSM 之前，我們需要確定我們的狀態和輸入。在這個例子中，我們將定義三個狀態：起始狀態、數字狀態和字元串狀態。我們還將定義四個輸入：數字、字母、引號和空格。
  • 定義狀態機類
    現在，我們可以編寫代碼來實現我們的 FSM 。我們需要定義一個狀態機類，它將接受輸入，並根據轉移規則轉換狀態。該類應該包含以下屬性：
    • currentState：當前狀態。
    • states：狀態列表。
    • transitions：轉移列表。
      它還應該包含以下方法：
    • transition：該方法接受一個輸入參數 input，根據當前狀態以及輸入參數，執行相應的狀態轉換。
  • 定義轉移規則
    我們還需要定義狀態之間的轉移規則。為此，我們將使用轉移列表，其中包含狀態之間的映射和輸入。轉移規則應該考慮當前狀態和輸入，並根據它們確定下一個狀態。如果當前狀態和輸入沒有匹配的轉移規則，則應該拋出一個異常。
  • 解析文本
    現在，我們可以使用狀態機解析文本。我們需要將文本拆分為單詞，並將每個單詞作為輸入提供給狀態機。在處理完所有輸入後，我們可以通過調用 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 應用

使用 有限狀態機（FSM） 結合 React 構建 web 應用，不局限於身份認證，登錄，步驟表單，有蠻多 web 應用在
有限狀態機（FSM）的實踐 ，下麵主要描述 從有限狀態機（FSM）在服務端拉取數據的狀態轉移上的應用

  • 狀態轉移圖
    file

  • 狀態集（States）, 轉換規則（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 */,
  },
}

示例代碼

總結

結合前端應用的探索體現的不多，可以再作為第二篇內容去探討，有興趣的同學可以嘗試一下 有限狀態機（FSM） 在 web 上的應用探索，以及 Xstate庫（FSM封裝的功能性庫） 的應用，以及跟 狀態管理庫 差異化的知識。在這裡提醒一點，狀態管理庫 （Redux） 和 Xstate 並不是互斥的，Xstate 關註的是如何設計狀態，狀態管理庫關註的是如何管理狀態。事實上，狀態機幾乎可以與任何無主見的狀態管理工具一起使用。我鼓勵您探索各種方法，以確定最適合您、您的團隊和您的應用程式的方法。

參考資料


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • OpenHarmony SystemUI開發記錄
    背景介紹 最近學習OpenHarmony應用開發， SDK版本是3.2.9.2 Beta4，IDE版本是3.1.0.200。參考官方文檔，做了個Demo應用，調試、運行非常順利。啟動應用後，狀態欄和導航欄占用的高度過高，顯得很奇怪，嘗試修改一下系統應用。 摸石頭過河 因為沒做過移動端開發，最初以為狀 ...
  • 手機穿戴設備能力共用，提升豐富交互體驗
    HUAWEI Wear Engine面向手機和穿戴設備的應用與服務開發者，提供華為穿戴設備開放能力。 開發者通過調用Wear Engine開放能力，可以實現手機上的生態應用與服務給華為穿戴設備發消息、發通知、傳輸數據，並獲取穿戴設備狀態、讀取感測器數據等，也可以實現華為穿戴設備上的生態應用與服務給手 ...
  • Cmder: 懶癌必備！從此告別記事本記命令的日子
    前言 平時開發中遇到這樣那樣的命令需要記下來，一般做法是這樣。 新建記事本 將需要記下的關鍵命令保存。 每次需要使用時，粘貼複製即可。 好像沒什麼毛病！直到遇到了 Cmder。。。 當看到同事分析問題時在 Cmder 里命令快捷鍵刷刷一頓操作，覺得挺厲害滴。感覺這同事技術好牛，快捷鍵用這麼好。後來才 ...
  • 華為雲 OpenTiny 跨端、跨框架企業級開源組件庫項目落地實踐直播即將開啟！
    OpenTiny 組件庫建設者、開源社區負責人 Kagol 與前端楊村長聯合直播，盛情邀請你一同共同揭秘：OpenTiny 的落地實踐之路。 就在周五晚8點，前端村長直播間，等你來撩~ ...
  • 微信小程式學習筆記
    註冊及開發配置 註冊：微信公眾平臺 註冊後在開發管理-開發設置中複製AppID(小程式ID)； 開發工具：推薦官方 微信開發者工具 微信官方文檔： 微信開放文檔 新建第一個項目 在微信開發者工具中新建項目 打開並登錄微信開發者工具，新建一個小程式項目。appID填入你剛剛複製的id，後端服務可選中不 ...
  • vue全家桶進階之路46：Vue3 Axios攔截器
    在Vue.js 3中，使用Axios與Vue.js 2.x中類似，但是需要進行一些修改和更新，下麵是Vue.js 3中Axios的定義和使用方式： 首先，你需要安裝Axios和Vue.js 3.x，可以使用npm或yarn等包管理工具安裝： npm install axios vue@next 然後 ...
  • 執行上下文
    JavaScript 簡寫語法 1、簡寫的閉包自執行函數（Immediately Invoked Function Expression (IIFE)） 使用括弧將函數定義包裹起來，再在末尾加上另一對括弧，即可創建一個自執行函數。例如： (() => { console.log("Hello, wo ...
  • 記錄-JS簡單實現購物車圖片局部放大預覽效果
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 一、實現效果 二、代碼實現 代碼不多，先看一下 HTML 裡面結構很簡單，初始化 MagnifyingGlass 對象來關聯一個 IMG 標簽來實現放大。 <!DOCTYPE html> <html> <head> <meta chars ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類