iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Software Development

From State Machine to XState 系列

介紹狀態機的概念、目的到如何實際在當代框架中開發應用

鐵人鍊成 | 共 31 篇文章 | 30 人訂閱 訂閱系列文 RSS系列文 團隊Web 實驗室
DAY 1

Day01 - 緣起:怎麼了?為什麼?如何掌握過於自由的程式碼?

“Any fool can write code that a computer can understand. Good programmers write...

2021-09-16 ‧ 由 Ken Chen 分享
DAY 2

Day02 - 觀察:自由的程式碼?有什麼蛛絲馬跡、現象?

自由的潛在風險 -( 問題發生的原因 ) 從前一天的故事及開發範例,我們發現隨著新需求的出現,我們必須回去修改既有的邏輯,這樣子的情形,並不符合開放封閉原則,也...

2021-09-17 ‧ 由 Ken Chen 分享
DAY 3

Day03 - 個體、對象以及狀態

小回顧 Day01 - 緣起:怎麼了?為什麼?如何掌握過於自由的程式碼? 以訂單、RPG 角色的移動,這 2 個例子,描述在複雜的軟體應用、系統中,會面臨的挑...

2021-09-18 ‧ 由 Ken Chen 分享
DAY 4

Day04 - 事件、狀態轉移

我們必須記憶一個主體的狀態,以便系統後續進行判斷、操作或其他使用,為此我們也在 Day 03 釐清「狀態」、「個體」的定義。 範例前情提要 訂單:提交 → 待...

2021-09-19 ‧ 由 Ken Chen 分享
DAY 5

Day05 - 開始、結束與有限狀態機

昨天習得 事件 、 轉移 的概念後,讓我們來思考實作這個 transition,還需要什麼東西? transition('待付款', '收到帳款') ===...

2021-09-20 ‧ 由 Ken Chen 分享
DAY 6

Day06 - 根據需求畫出 Flowchart 或是 State Diagram

今天嘗試將 2D RPG 角色移動模組根據規格畫出 Flowchart 和 State Diagram 規格 按下 ⇦、⇨ 可控制玩家移動 按下 B 是...

2021-09-21 ‧ 由 Ken Chen 分享
DAY 7

Day07 - Flowchart versus State Diagram 讓我們比一比

我們根據昨天的需求畫出以下兩張圖 1. Flowchart 我們先看看 Flowchart 圖中的白色 ◇ 代表邏輯判斷,藍色 ▢ 代表程式碼實作的內容、『執...

2021-09-22 ‧ 由 Ken Chen 分享
DAY 8

Day08 - 實作一個狀態機 - 1

根據需求畫出狀態圖後 他們都有一個初始狀態 整個實體、物件或是對象,都有一系列不同的狀態們 還有一系列不同的事件,可能會導致狀態轉移 還有一張紀錄著什麼事件...

2021-09-23 ‧ 由 Ken Chen 分享
DAY 9

Day09 - 實作一個狀態機 - 2

State Machine 不完備,沒有一個變數能幫我記憶當下的狀態是什麼,我在使用 transition 時還要另外用一堆變數來儲存 state ,感覺不好...

2021-09-24 ‧ 由 Ken Chen 分享
DAY 10

Day10 - 實作一個狀態機 - 3

我們昨天透過一個 object 描述一個狀態機的定義,還記得前天我們的 switch / case 做出的 transition function 嗎?tran...

2021-09-25 ‧ 由 Ken Chen 分享