前端工程

快速概述狀態機，並提供簡單的例子。 最近在 JavaScript 領域中越來越多地談論 有限狀態機。 有一個名叫 XState 的流行庫，在 GitHub 上有超過 1.1 萬顆星星，我最近遇到了它，並且在 Twitter 和其他地方都看到它。這是一個非常酷的項目。 我第一次接觸有限狀態機和自動機是在 20 年前的高中時代，然後在大學的數位設計課程中又遇到。 這門數位設計課程主要涉及編碼信息、布林代數、組合電路、時序電路、序列狀態機、算術電路、VHDL 等內容。 我發現將有限狀態機應用於前端工程非常有趣，於是我回頭翻閱了以前的教科書，看看能否找到一個好的解釋。 我確實找到了很多資訊，但當然由於教科書的緣故，事情被複雜化得沒有必要（在我看來）。我喜歡簡化事物，因此我決定寫一個適合普通人的小節，並非理論的或任何為了通過考試而製作的東西。你可以應用於實際世界的事物。 狀態機 在介紹什麼是有限狀態機之前，我要先介紹什麼是狀態機。 世界上到處都是狀態機。你可以在各個地方看到它們，但也許你沒有把它們視為狀態機。在閱讀本教程之後，我相信你會指出現實世界中的一些物體，對你的朋友說：“這是一個 狀態機”（取決於你的朋友對於書呆子程度）。 最受歡迎且最常見的例子就是交通信號燈。 任何時候，交通信號機都有一個明確的狀態。通常，它要麼： 綠燈亮，其他兩個燈熄滅； 紅燈亮，其他兩個燈熄滅； 黃燈亮，其他兩個燈熄滅。 （有些交通信號燈可能有些區別，但對於本例子而言，我們不需要關心） 在狀態機的術語中，燈號的開啟或關閉被稱為輸出。 以上的三種情況被稱為狀態。當交通信號機接收到一個輸入時，通常只是一個固定的計時器，該計時器決定綠燈、黃燈和紅燈應該亮多久，信號機的狀態會更改。 在這種情況下，計時器是系統的輸入。有些信號機配有一個行人可以按下的按鈕，以導致紅燈顯示給汽車，這是另一個輸入。 在狀態機中，狀態只能在根據輸入的情況下更改（我們稱之為轉換）。 有限狀態機 我們的交通信號燈狀態機被稱為有限，因為我們只有有限的狀態。 有些系統可能有無限個狀態，例如世界生態系統模型或昆蟲的生活。我們無法用有限數量的狀態來定義它。 但是交通信號燈呢？這是一個簡單的東西，它只有三種狀態，如上所述。 我們還可以舉出許多例子： 自動售貨機 地鐵入口的轉閘 暖氣系統 自動地鐵系統 自動駕駛車系統 電梯 但讓我們先專注在我們的交通信號燈示例上，這是非常簡單的，我們可以很容易地理解。 建立狀態機模型 當然，交通信號機不是單獨存在的。這是另一個有限狀態機，其中每個十字路口的每一側道路上都被安裝了多個交通信號機，它們同步工作。 現在先不要考慮它。讓我們專注於一個單獨的交通信號機。 如前所述，我們有 3 種狀態，可以稱之為綠燈、紅燈、黃燈。 我們有一個初始狀態。假設在重置交通信號燈時，我們的信號燈處於 green 狀態。 我們有一個計時器，在綠燈狀態持續 50 秒後，信號機切換到 yellow 狀態。黃燈狀態持續 8 秒，然後切換到 red 狀態，並在那裡停留 32 秒，因為那條路是附屬的，應該給予較少時間。之後，信號機回到綠燈狀態，這個循環無限地繼續下去，直到電力被切斷，信號機重新接通電源時重置。 總計，我們有一個 90 秒的循環。...