線上課程觀課進度管理小工具開發日誌
Day 6:JavaScript 程式碼執行排序:遞迴函數、Call Stack、Task Queue
Call Stack;遞迴函數與 call stack 的關係;Task Queue(非同步的概念再釐清)
Day 9:「修煉圈圈 Practice Rings」Web app 開發日誌 - 2025 六角 AI Vibe Coding 體驗營期末大魔王作業
這份筆記旨在記錄 2025 六角 Vibe Coding 體驗營每日作業 Day 21 的期末專案成果,從一個簡單的個人痛點出發,透過與 AI(在我這個情境中是 Perplexity)協作,在一天內完成了一個包含前後端的全端網頁小工具:「修煉圈圈 Practice Rings」。
<100 subscribers
線上課程觀課進度管理小工具開發日誌
Day 6:JavaScript 程式碼執行排序:遞迴函數、Call Stack、Task Queue
Call Stack;遞迴函數與 call stack 的關係;Task Queue(非同步的概念再釐清)
Day 9:「修煉圈圈 Practice Rings」Web app 開發日誌 - 2025 六角 AI Vibe Coding 體驗營期末大魔王作業
這份筆記旨在記錄 2025 六角 Vibe Coding 體驗營每日作業 Day 21 的期末專案成果,從一個簡單的個人痛點出發,透過與 AI(在我這個情境中是 Perplexity)協作,在一天內完成了一個包含前後端的全端網頁小工具:「修煉圈圈 Practice Rings」。
今天偏輕量閱讀《008天重新認識 JavaScript》,花比較多時間在 code review,討論這兩週練習的程式碼,順便整理一些「之後要重複使用的寫法跟思考模式」。
第一次 code review 後有再回去練習重構,這一輪回頭看,程式碼閱讀理解能力有明顯進步,對原生方法的運用也比較有感,但還是需要多實作才會熟練。這次的重點比較聚焦在:函式撰寫風格、檔案架構管理,以及驗證流程怎麼拆才比較乾淨。
目前的練習方向是要把「檔名」也當成 API 的一部分來看待。
像這次的練習功能實際上是「反覆提問 + 驗證」,而不是單純問一個問題,所以檔名就會優先考慮用主要函式名稱,讓人一看到檔案就知道它的責任範圍。
在這一輪練習裡,比較容易卡住的地方是 arr.map 這種陣列方法,尤其是中間會改變資料格式的時候。
結論是:要特別小心 method chaining,每一步都要搞清楚「現在這個函式吃的是什麼型別?」、「吐出來的是什麼型別?」才不會在中間某一段突然壞掉卻找不到原因。
這次也花不少時間在討論「驗證器」要怎麼設計比較好維護:
驗證器儘量切細,命名要語意化,呼叫起來就像在講人話。
各個驗證器自己丟自己的錯誤訊息,外層在 catch (error) 時用 error.message 來決定要顯示什麼。
驗證規則通常會分步驟呼叫,所以實務上會一次呼叫一包驗證器陣列,逐一跑過所有驗證。
驗證回傳值目前先用「物件包裝」當目標方向,讓所有驗證器回傳格式統一,而不是只回傳單一 Number 或Sring純值,這樣未來要延伸其他格式比較好長。
針對 CLI I/O,這次的思路是「避免在迴圈裡面再包迴圈」:
嘗試用 Promise 取代 while loop 來做重複提問的功能,讓流程更符合 Node.js 的非同步風格。
用同一個 readline.Interface 重複問問題,每次回答後讓 Promise 等待驗證結果再決定要不要繼續問。
驗證階段則用一個裝著多個驗證器的陣列,透過迴圈依序呼叫各個驗證步驟,只有這裡會用迴圈,其他地方就盡量平鋪邏輯。
整體原則是:函式的功能定義盡量單純。
所以會盡可能避免在 function 裡面又宣告一個新的 function(巢狀函式),如果真的需要 helper,就抽出來變成同一檔案裡的獨立小函式,讓每一塊的責任比較清楚。
這次也順便整理一些自己現在在練的開發小習慣:
小修改時先用註解保留原來寫法,避免一改就忘記之前長怎樣。
用 console.log 把條件判斷拆開看,確認實際執行路徑有沒有跟自己想的一樣。
手動跑程式確認行為,不只看測試有沒有過,因為有時候測試是「剛好沒測到」而不是「真的沒問題」。
VS Code 快捷鍵小補充:
cmd + B 收合側邊欄
cmd + shift + F 全域搜尋
瀏覽器事件這一塊主要是延續前一天的複習,搭配官方文件裡關於 EventTarget、Event、DOM 事件流的說明,一起整理成自己比較好消化的版本。
整體可以先簡化成一句話:
「透過定義處理器和監聽器,控制在什麼情況下(監聽器)要觸發什麼行為(處理器)。」
處理器(on-event handler):綁在 DOM 元素上的函式,負責定義發生事件時要做什麼,例如按下按鈕就跳出 alert。
監聽器(EventTarget.addEventListener()):註冊事件名稱、指定 handler,還可以決定要在捕獲或冒泡階段觸發,必要時可以用 removeEventListener() 解除註冊。
同一個事件可以綁多個 handler,但在解除時要明確指定要解綁的是哪一個 handler 實體,以及和當初註冊相同的選項。
這裡再幫自己複習一次事件流的基本模型:
事件會從最外層一路「捕獲」到目標元素,再從目標「冒泡」回去,整個過程中,對應階段有註冊監聽器的節點就會被呼叫。
addEventListener 的第三個參數(或 options 物件)可以控制 listener 要在捕獲階段就先觸發,還是走預設的冒泡路徑。
最後是事件註冊方式的整理:
把 onclick、onchange 這種直接寫在 HTML tag 上的屬性拿掉,改成在 JavaScript 裡用 addEventListener 來綁事件,讓 HTML 只負責結構和內容。
這樣的寫法比較符合關注點分離的概念:HTML 管內容、CSS 管樣式、JavaScript 管行為,也比較貼近現代前端在講的非侵入式 JavaScript 寫法。
MDN Web Docs – JavaScript
MDN Web Docs – EventTarget
MDN Web Docs – Event
MDN Web Docs – DOM 事件
MDN Web Docs – EventTarget.addEventListener()
MDN Web Docs – EventTarget.removeEventListener()
今天偏輕量閱讀《008天重新認識 JavaScript》,花比較多時間在 code review,討論這兩週練習的程式碼,順便整理一些「之後要重複使用的寫法跟思考模式」。
第一次 code review 後有再回去練習重構,這一輪回頭看,程式碼閱讀理解能力有明顯進步,對原生方法的運用也比較有感,但還是需要多實作才會熟練。這次的重點比較聚焦在:函式撰寫風格、檔案架構管理,以及驗證流程怎麼拆才比較乾淨。
目前的練習方向是要把「檔名」也當成 API 的一部分來看待。
像這次的練習功能實際上是「反覆提問 + 驗證」,而不是單純問一個問題,所以檔名就會優先考慮用主要函式名稱,讓人一看到檔案就知道它的責任範圍。
在這一輪練習裡,比較容易卡住的地方是 arr.map 這種陣列方法,尤其是中間會改變資料格式的時候。
結論是:要特別小心 method chaining,每一步都要搞清楚「現在這個函式吃的是什麼型別?」、「吐出來的是什麼型別?」才不會在中間某一段突然壞掉卻找不到原因。
這次也花不少時間在討論「驗證器」要怎麼設計比較好維護:
驗證器儘量切細,命名要語意化,呼叫起來就像在講人話。
各個驗證器自己丟自己的錯誤訊息,外層在 catch (error) 時用 error.message 來決定要顯示什麼。
驗證規則通常會分步驟呼叫,所以實務上會一次呼叫一包驗證器陣列,逐一跑過所有驗證。
驗證回傳值目前先用「物件包裝」當目標方向,讓所有驗證器回傳格式統一,而不是只回傳單一 Number 或Sring純值,這樣未來要延伸其他格式比較好長。
針對 CLI I/O,這次的思路是「避免在迴圈裡面再包迴圈」:
嘗試用 Promise 取代 while loop 來做重複提問的功能,讓流程更符合 Node.js 的非同步風格。
用同一個 readline.Interface 重複問問題,每次回答後讓 Promise 等待驗證結果再決定要不要繼續問。
驗證階段則用一個裝著多個驗證器的陣列,透過迴圈依序呼叫各個驗證步驟,只有這裡會用迴圈,其他地方就盡量平鋪邏輯。
整體原則是:函式的功能定義盡量單純。
所以會盡可能避免在 function 裡面又宣告一個新的 function(巢狀函式),如果真的需要 helper,就抽出來變成同一檔案裡的獨立小函式,讓每一塊的責任比較清楚。
這次也順便整理一些自己現在在練的開發小習慣:
小修改時先用註解保留原來寫法,避免一改就忘記之前長怎樣。
用 console.log 把條件判斷拆開看,確認實際執行路徑有沒有跟自己想的一樣。
手動跑程式確認行為,不只看測試有沒有過,因為有時候測試是「剛好沒測到」而不是「真的沒問題」。
VS Code 快捷鍵小補充:
cmd + B 收合側邊欄
cmd + shift + F 全域搜尋
瀏覽器事件這一塊主要是延續前一天的複習,搭配官方文件裡關於 EventTarget、Event、DOM 事件流的說明,一起整理成自己比較好消化的版本。
整體可以先簡化成一句話:
「透過定義處理器和監聽器,控制在什麼情況下(監聽器)要觸發什麼行為(處理器)。」
處理器(on-event handler):綁在 DOM 元素上的函式,負責定義發生事件時要做什麼,例如按下按鈕就跳出 alert。
監聽器(EventTarget.addEventListener()):註冊事件名稱、指定 handler,還可以決定要在捕獲或冒泡階段觸發,必要時可以用 removeEventListener() 解除註冊。
同一個事件可以綁多個 handler,但在解除時要明確指定要解綁的是哪一個 handler 實體,以及和當初註冊相同的選項。
這裡再幫自己複習一次事件流的基本模型:
事件會從最外層一路「捕獲」到目標元素,再從目標「冒泡」回去,整個過程中,對應階段有註冊監聽器的節點就會被呼叫。
addEventListener 的第三個參數(或 options 物件)可以控制 listener 要在捕獲階段就先觸發,還是走預設的冒泡路徑。
最後是事件註冊方式的整理:
把 onclick、onchange 這種直接寫在 HTML tag 上的屬性拿掉,改成在 JavaScript 裡用 addEventListener 來綁事件,讓 HTML 只負責結構和內容。
這樣的寫法比較符合關注點分離的概念:HTML 管內容、CSS 管樣式、JavaScript 管行為,也比較貼近現代前端在講的非侵入式 JavaScript 寫法。
MDN Web Docs – JavaScript
MDN Web Docs – EventTarget
MDN Web Docs – Event
MDN Web Docs – DOM 事件
MDN Web Docs – EventTarget.addEventListener()
MDN Web Docs – EventTarget.removeEventListener()
Share Dialog
Share Dialog
No comments yet