# Day 17：Code review 重構與驗證器設計、瀏覽器 event 管理

**Published by:** [雞蛋糕的前端修煉屋](https://paragraph.com/@gcake/)
**Published on:** 2025-12-12
**URL:** https://paragraph.com/@gcake/day-17

## Content

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

## Publication Information

- [雞蛋糕的前端修煉屋](https://paragraph.com/@gcake/): Publication homepage
- [All Posts](https://paragraph.com/@gcake/): More posts from this publication
- [RSS Feed](https://api.paragraph.com/blogs/rss/@gcake): Subscribe to updates