在初期開發這個作品時，因為採取 「邊做邊驗證」 的策略，並沒有預先對程式碼進行模組化拆分。當時的專案架構如下：

當功能開發完成、回過頭 Review 程式碼時，雖然當初邊寫有邊留註解，但面對近兩千行的單一檔案，閱讀起來依然相當痛苦。

特別是在時間碎片化的情況下，很難拆解成小模組進行區域性檢查；有時候檢查到一半被其他事情打斷，下次再回到專案時又得重新梳理邏輯。但是自己挖的坑，自己填補起來，才是個負責任的大人。為了未來的維護性與可讀性，重構吧！

重構與新架構

這次重構主要針對程式碼量龐大的 all.js 進行模組化拆分。

另外，針對 i18n.js，會將 「語系切換邏輯」 與 「字典資料」 分開成不同檔案。未來如果需要新增其他語系，只需要擴充字典檔即可，維護起來更加單純。

重構後的 JS 目錄結構如下：

js/
├── config
│   ├── i18n.js
│   ├── locales/
│   │   ├── zh-TW.js
│   │   ├── en.js
│   │   ├── ja.js
│   └── └──index.js 
│   
├── all.js
├── data.js
├── db.js
├── dom.js
├── events.js
├── render.js
├── state.js
├── task.js
├── theme.js
├── timer.js
├── utils.js
└── privacy.js

重構後的檔案功能說明和程式碼行數

結語

有時候覺得「重構程式碼」甚至比「寫新功能」還要辛苦。因為只要稍微不注意，原本運作正常的機能就可能因為模組作用域或載入順序問題而壞掉，很容易感到挫折。

但當看到重構完成、所有程式碼與檔案都被「擺放得整整齊齊」的那一刻，感到很清爽。

剛開始開發時，目標很單純：「只要能把功能做出來、跑得順就好。」雖然因為是個人獨立開發，初期沒有太講究架構，但很開心自己最後不僅完成了作品，還跨出了重構的這一步。

經歷了這次經驗，在未來的開發歷程中，我會嘗試養成邊寫邊整理，朝向寫出高可讀性、高維護性程式碼的方向繼續前進。