今天偏輕量閱讀《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()