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.9 KiB
3.9 KiB
改善路由
指示
現在您已經建立了一個基本的路由系統，是時候通過專業功能來提升它，以改善用戶體驗並提供更好的開發工具。真實世界的應用程式需要的不僅僅是模板切換——它們還需要動態頁面標題、生命週期掛鉤以及可擴展的架構。
在這次作業中，您將擴展您的路由實現，加入兩個在生產環境的網頁應用程式中常見的重要功能。這些改進將使您的銀行應用程式更加完善，並為未來的功能提供基礎。
目前的路由宣告僅包含要使用的模板 ID。但在顯示新頁面時，有時需要更多的內容。讓我們通過以下兩個額外功能來改善路由實現：
功能 1：動態頁面標題
目標： 為每個模板提供標題，並在模板更改時使用新標題更新窗口標題。
為什麼這很重要：
- 改善 用戶體驗，顯示描述性的瀏覽器標籤標題
- 增強 屏幕閱讀器和輔助技術的可訪問性
- 提供 更好的書籤和瀏覽器歷史記錄上下文
- 遵循 專業的網頁開發最佳實踐
實現方法：
- 擴展 路由物件以包含每個路由的標題資訊
- 修改
updateRoute()函數以動態更新document.title - 測試 在不同頁面之間導航時，標題是否正確更改
功能 2：路由生命週期掛鉤
目標： 添加一個選項，在模板更改後執行一些代碼。我們希望每次顯示儀表板頁面時，在開發者控制台中打印 'Dashboard is shown'。
為什麼這很重要：
- 啟用 在特定路由加載時執行自定義邏輯
- 提供 分析、日誌記錄或初始化代碼的掛鉤
- 創建 更複雜路由行為的基礎
- 展示 網頁開發中的觀察者模式
實現方法：
- 添加 一個可選的回調函數屬性到路由配置中
- 執行 回調函數（如果存在）在模板渲染完成後
- 確保 此功能適用於任何定義了回調的路由
- 測試 在訪問儀表板時，控制台消息是否出現
評分標準
| 評分標準 | 卓越 | 合格 | 需要改進 |
|---|---|---|---|
兩個功能均已實現並正常運作。標題和代碼添加也適用於在 routes 宣告中新增的路由。 |
兩個功能正常運作，但行為是硬編碼的，無法通過 routes 宣告進行配置。新增第三個具有標題和代碼添加的路由無法正常運作或僅部分運作。 |
缺少其中一個功能或功能未正常運作。 |
免責聲明：
本文件已使用 AI 翻譯服務 Co-op Translator 進行翻譯。儘管我們努力確保翻譯的準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵信息，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤釋不承擔責任。