前端checklist
前端checkList
最近一直写一些表单、表格、echart的增删改查。功能类似 ,但是还是有一些问题。 和测试来回拉扯沟通,修改bug也很浪费时间。如果一开始就都干好就会省下更多的时间。
总之,能copy就copy copy+改会少去很多问题,虽然都是小问题,但是增加沟通成本和降低了效率,还浪费二次时间
毕竟每一次启动项目、开发、自测、提交代码、部署 都是需要时间!
需求澄清
新开页面是弹框形式还是页面。新页面在新窗口还是原窗口打开
输入框有限定字符数吗 校验规则
图片文件上传 限定格式、尺寸、大小
方案实现是否有问题
页面UI检查
页面的边距是否统一,表单区域上下左右 表格区域上下左右 。页面整体上下左右
字体大小,表格表单字体、粗细、颜色 行高是否统一
文本左对齐,数值右对齐
带图片的行高
页面显示无重叠。包括低分辨率下的页面重叠
层级遮挡,是否有弹出框层级遮挡
颜色风格统一
按钮优先级以及图标 边距是否统一
页面无js错误
需要必填的控件,有必填提醒,如 *
表单控件是否可清除
页面、提示无错别字
表格溢出提示(公共组件处理)
控件摆放的位置合适,优先级是否正确。确认按钮在左、取消按钮在右
相同校验提示语是否一致
标签是否需要加颜色显示
删除按钮 成功状态的标签显示 需要封装指令!
能否增加动画或者过渡,让页面体验更好
功能开发
- 字段输入内容的校验,空、超长、临界值
- 小数的位数显示多少位,是否以四舍五入的方式显示
- 特殊字符乱码
- 默认值的检查
- 删除后是否刷新,页面立即不显示被删除的内容
- 防止重复提交问题,单页后退重复提交
- 要考虑自动过滤空格的情况
- 表单提交失败停留在当前页面,已输入的内容不会被清空,或重新选择
- 有时间段的查询时,开始时间不能大于结束时间
- 分页查询,每次点查询是否有重置pageStart
- 编辑数据或者操作某些数据,是否有重新刷新列表页面
- 是否兼容了后端数据为空场景或者data为null场景
- 是否校验添加重复数据、不合法数据
- 功能或者页面是否需要按权限、角色做区分
- 是否有请求竞态问题,多次异步请求需要取消前一次请求,控制台cancel报错
- try cache错误后是否有打印。而不是完全吞掉错误
- 提交数据是否需要自动过滤不符合规则或者空数据
- 页面有导入导出的时候模板名称是否有修改
- 表格列宽设置是否合理?
- 删除、或者重要修改是否有二次确认
- 是否有删除多余的console 以及debugger 注释代码
- 常量需要定义枚举
- 公共功能代码是否有抽离
兼容性
- 不同分辨率页面布局显示是否合理,整齐,分辨率一般为1024768 > 12801024 >800*600
- 小屏幕下表格列宽设置是否合理?
- 小屏幕下是否有遮挡,弹出菜单和悬浮框的遮挡。弹出框的显示不完全
前端checklist
https://blog.dayday.cyou/2024/03/16/前端checklist/