You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
3.6 KiB
3.6 KiB
改善路由
指示
現在你已經建立了基本的路由系統，是時候用專業功能來增強它，以改善使用者體驗並提供更好的開發工具。實際應用程式需要的不僅是模板切換－它們需要動態頁面標題、生命週期鉤子和可擴充的架構。
在此作業中，你將擴展你的路由實現，加入兩個在生產網頁應用中常見的基本功能。這些增強將讓你的銀行應用感覺更完善，並為未來功能打下基礎。
路由宣告目前只包含要使用的模板 ID，但在顯示新頁面時，有時需要更多資訊。讓我們用兩個額外功能來改善我們的路由實作：
功能 1：動態頁面標題
目標： 為每個模板指定標題，並在模板變更時動態更新視窗標題。
重要性：
- 提升使用者體驗，顯示具描述性的瀏覽器分頁標題
- 增強輔助技術如螢幕閱讀器的可用性
- 提供更好的書籤和瀏覽器歷史記錄上下文
- 遵循專業網頁開發最佳實務
實作方向：
- 擴充 routes 物件以包含每個路由的標題資訊
- 修改
updateRoute()函式，使其動態更新document.title - 測試在切換不同畫面時標題是否正確變更
功能 2：路由生命週期鉤子
目標： 新增選項可在模板變更後執行某段程式碼。我們希望每次顯示「Dashboard」頁面時，都在開發者主控台印出 'Dashboard is shown'。
重要性：
- 允許在特定路由載入時執行自定義邏輯
- 提供分析、紀錄或初始化程式碼的鉤子
- 建立更複雜路由行為的基礎
- 展現網頁開發中的觀察者模式
實作方向：
- 加入選用的回呼函式屬性至路由設定
- 在模板渲染完成後執行該回呼函式（若有定義）
- 確保此功能對所有帶回呼的路由有效
- 測試訪問 Dashboard 時，主控台訊息是否顯示
評量標準
| 標準 | 優異 | 及格 | 需改進 |
|---|---|---|---|
兩項功能皆已實作且可運作。對 routes 宣告新增的路由也適用標題及程式碼加入功能。 |
兩項功能可運作，但行為為硬編碼，且無法透過 routes 宣告設定。新增第三個有標題及程式碼的路由時，功能無法或部分運作。 |
有一項功能缺失或無法正常運作。 |
免責聲明：
本文件係使用 AI 翻譯服務 Co-op Translator 進行翻譯。雖然我們努力追求準確性，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯而產生的任何誤解或誤譯承擔任何責任。