隨著專案功能越來越多，如果所有的程式碼全都擠在同一個檔案裡，不僅程式碼會變得超長，維護起來也十分頭痛。
因此，今天的核心任務有兩個：

1. 模組化大掃除：把原本單一檔案的程式碼，正式拆分為 index.html（結構）、style.css（樣式）與 script.js（邏輯）三個獨立檔案。
2. 架構思考：探討為什麼我們最後選擇了 SPA（單頁式應用程式） 架構，而不是初學者最直覺的多頁式跳轉。

一、 VS Code 專案重構

我們在 VS Code 專案資料夾中，將程式碼分工為：
• index.html：只負責網頁的骨架、各分頁區塊與按鈕容器。
• style.css：專門管理排版、顏色與頁面隱藏切換（.page-view）。
• script.js：集中處理資料儲存 (localStorage)、畫面渲染、計算與點擊事件。

▲ 將原本程式碼分為三部分

二、 為什麼我們放棄多頁式，改用 SPA 架構？

在規畫多頁面時，一開始我的第一直覺是：「每一個分頁都開一個獨立的 HTML 檔案（例如 overview.html、calendar.html、budget.html）」
但深入思考後，我們發現純前端的 MPA（多頁式應用程式）在記帳網站上有幾個致命痛點：

1. 資料共用變得很麻煩：我們的記帳資料是保存在陣列中並存放在 localStorage 裡。如果切換到不同的 HTML 檔案，雖然資料還在，但每個檔案都要重複寫一次讀取、解析、綁定刪除的程式碼，造成嚴重的程式碼重複。
2. 畫面閃爍與體驗不佳：每次點擊選單跳轉網頁，瀏覽器都會整個重新整理，使用者體驗不夠流暢。
   所以最後我採用了SPA單頁式的概念，所有畫面都寫在同一個 index.html 裡面，透過 CSS 把不需要的頁面隱藏 (display: none)，並利用 JavaScript 在點擊選單時動態切換顯示狀態 (.active-page)。

// 簡單俐落的 SPA 頁面切換邏輯
const menuButtons = document.querySelectorAll('.menu-btn');
const pageViews = document.querySelectorAll('.page-view');

menuButtons.forEach(btn => {
    btn.addEventListener('click', function(e) {
        e.preventDefault();
        
        // 移除所有按鈕與頁面的 active 狀態
        menuButtons.forEach(b => b.classList.remove('active'));
        pageViews.forEach(p => p.classList.remove('active-page'));

        // 幫被點擊的目標加上 active
        this.classList.add('active');
        const targetId = this.getAttribute('data-target');
        document.getElementById(targetId).classList.add('active-page');
    });
});

▲不同頁面展示

把程式碼拆成三個檔案的瞬間，VS Code 的專案看起來瞬間專業了許多！而透過這次「多頁式 vs SPA」的架構思考，也讓我們深刻體會到：沒有絕對完美的架構，只有最適合當前專案需求的解法。對於需要頻繁共用狀態的記帳軟體來說，SPA 確實是現階段的最佳選擇。