2.8 KiB
2.8 KiB
教师仪表板最终简化总结
简化内容
1. 移除冗余 Getter 函数
- 移除
getActivityTitle(activity): 模板直接使用三元表达式activity.title != null && activity.title != '' ? activity.title : (activity.description != null && activity.description != '' ? activity.description : '无标题') - 移除
getActivityIcon(type): 模板直接使用嵌套三元表达式处理图标显示 - 移除
formatDateTimeLocal(dateStr): 直接使用导入的formatDateTime(dateStr)
2. 模板直接使用类型属性
// 之前的方式
<text class="activity-title">{{ getActivityTitle(activity) }}</text>
<text class="activity-icon">{{ getActivityIcon(activity.type) }}</text>
<text class="activity-time">{{ formatDateTimeLocal(activity.created_at) }}</text>
// 现在的方式 - 直接使用类型属性
<text class="activity-title">{{ activity.title != null && activity.title != '' ? activity.title : (activity.description != null && activity.description != '' ? activity.description : '无标题') }}</text>
<text class="activity-icon">{{ activity.type == 'assignment' ? '📝' : (activity.type == 'project' ? '🏋️♀️' : (activity.type == 'record' ? '📊' : (activity.type == 'evaluation' ? '✅' : '📌'))) }}</text>
<text class="activity-time">{{ formatDateTime(activity.created_at) }}</text>
3. 类型系统优势充分利用
- 强类型数据结构:
TeacherStats、Activity等类型定义确保类型安全 - 直接属性访问: 模板中所有数据访问都是强类型的
stats.total_assignments、activity.title等 - 类型安全的数据处理: 所有数据映射和转换都基于类型定义
4. 代码简洁性提升
- 减少函数层级: 移除不必要的包装函数
- 模板逻辑直接化: 在模板中直接处理简单的逻辑判断
- 充分利用 TypeScript/UTS 类型系统: 避免冗余的 getter 封装
最终状态
数据流
supa.executeAs<T>() → 强类型数据 → 模板直接使用类型属性
核心原则
- 类型优先: 定义清晰的类型结构,所有数据操作基于类型
- 直接访问: 模板直接使用类型属性,避免不必要的函数包装
- 简洁高效: 减少代码层级,提高可读性和维护性
类型安全保证
- 所有数据访问都是类型安全的
- 编译时类型检查确保属性存在性
- UTS 类型系统提供完整的类型推导
性能优势
- 减少函数调用开销: 模板直接访问属性而非调用 getter 函数
- 更好的 Tree Shaking: 未使用的 getter 函数被完全移除
- 编译优化: 直接属性访问有更好的编译器优化空间
这种重构完全贯彻了"有了强类型就直接用,不要写冗余 getter"的原则,代码变得更加简洁、高效且类型安全。