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