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.7 KiB
3.7 KiB
改进路由
指令
现在你已经构建了一个基本的路由系统，是时候通过专业功能来提升它，以改善用户体验并为开发者提供更好的工具。真实世界的应用不仅仅需要模板切换——它们需要动态的页面标题、生命周期钩子和可扩展的架构。
在本次作业中，你将通过实现两个在生产环境网页应用中常见的关键功能来扩展你的路由实现。这些增强功能将让你的银行应用更显完善，并为未来功能奠定基础。
当前的路由声明只包含要使用的模板 ID。但在显示新页面时，有时需要更多信息。让我们用两个额外的功能来改进路由实现：
功能 1：动态页面标题
目标： 给每个模板一个标题，并在模板更改时动态更新窗口标题。
重要性：
- 提升用户体验，显示描述性的浏览器标签标题
- 增强屏幕阅读器和辅助技术的可访问性
- 提供更好的书签和浏览器历史上下文
- 遵循专业的网页开发最佳实践
实现方法：
- 扩展 routes 对象，包含每个路由的标题信息
- 修改
updateRoute()函数以动态更新document.title - 测试在不同页面间导航时标题是否正确变化
功能 2：路由生命周期钩子
目标： 添加在模板更改后运行某些代码的选项。我们希望每次显示仪表板页面时，都在开发者控制台打印 'Dashboard is shown'。
重要性：
- 支持特定路由加载时执行自定义逻辑
- 提供分析、日志记录或初始化代码的钩子
- 为更复杂的路由行为奠定基础
- 展示网页开发中的观察者模式
实现方法：
- 为路由配置添加可选的回调函数属性
- 在模板渲染完成后执行回调函数（如果存在）
- 确保该功能适用于任何定义了回调的路由
- 测试访问仪表板时，控制台消息是否出现
评分标准
| 评判标准 | 优秀示范 | 合格 | 需要改进 |
|---|---|---|---|
两个功能均已实现且正常工作。对 routes 声明中新增的路由，标题和代码部分也能生效。 |
两个功能可用，但行为写死，无法通过 routes 声明进行配置。对新增包含标题和代码的第三条路由不起作用或部分起作用。 |
有一个功能缺失或工作不正常。 |
免责声明：
本文件由人工智能翻译服务 Co-op Translator 翻译。尽管我们力求准确，但请注意自动翻译可能包含错误或不准确之处。请以原文作为权威来源。对于重要信息，建议使用专业人工翻译。因使用本翻译所引起的任何误解或曲解，我们概不负责。