前端checklist

前端checkList

最近一直写一些表单、表格、echart的增删改查。功能类似 ,但是还是有一些问题。 和测试来回拉扯沟通,修改bug也很浪费时间。如果一开始就都干好就会省下更多的时间。

总之,能copy就copy copy+改会少去很多问题,虽然都是小问题,但是增加沟通成本和降低了效率,还浪费二次时间

毕竟每一次启动项目、开发、自测、提交代码、部署 都是需要时间!

需求澄清

  1. 新开页面是弹框形式还是页面。新页面在新窗口还是原窗口打开

  2. 输入框有限定字符数吗 校验规则

  3. 图片文件上传 限定格式、尺寸、大小

  4. 方案实现是否有问题

页面UI检查

  1. 页面的边距是否统一,表单区域上下左右 表格区域上下左右 。页面整体上下左右

  2. 字体大小,表格表单字体、粗细、颜色 行高是否统一

  3. 文本左对齐,数值右对齐

  4. 带图片的行高

  5. 页面显示无重叠。包括低分辨率下的页面重叠

  6. 层级遮挡,是否有弹出框层级遮挡

  7. 颜色风格统一

  8. 按钮优先级以及图标 边距是否统一

  9. 页面无js错误

  10. 需要必填的控件,有必填提醒,如 *

  11. 表单控件是否可清除

  12. 页面、提示无错别字

  13. 表格溢出提示(公共组件处理)

  14. 控件摆放的位置合适,优先级是否正确。确认按钮在左、取消按钮在右

  15. 相同校验提示语是否一致

  16. 标签是否需要加颜色显示

  17. 删除按钮 成功状态的标签显示 需要封装指令!

  18. 能否增加动画或者过渡,让页面体验更好

功能开发

  1. 字段输入内容的校验,空、超长、临界值
  2. 小数的位数显示多少位,是否以四舍五入的方式显示
  3. 特殊字符乱码
  4. 默认值的检查
  5. 删除后是否刷新,页面立即不显示被删除的内容
  6. 防止重复提交问题,单页后退重复提交
  7. 要考虑自动过滤空格的情况
  8. 表单提交失败停留在当前页面,已输入的内容不会被清空,或重新选择
  9. 有时间段的查询时,开始时间不能大于结束时间
  10. 分页查询,每次点查询是否有重置pageStart
  11. 编辑数据或者操作某些数据,是否有重新刷新列表页面
  12. 是否兼容了后端数据为空场景或者data为null场景
  13. 是否校验添加重复数据、不合法数据
  14. 功能或者页面是否需要按权限、角色做区分
  15. 是否有请求竞态问题,多次异步请求需要取消前一次请求,控制台cancel报错
  16. try cache错误后是否有打印。而不是完全吞掉错误
  17. 提交数据是否需要自动过滤不符合规则或者空数据
  18. 页面有导入导出的时候模板名称是否有修改
  19. 表格列宽设置是否合理?
  20. 删除、或者重要修改是否有二次确认
  21. 是否有删除多余的console 以及debugger 注释代码
  22. 常量需要定义枚举
  23. 公共功能代码是否有抽离

兼容性

  1. 不同分辨率页面布局显示是否合理,整齐,分辨率一般为1024768 > 12801024 >800*600
  2. 小屏幕下表格列宽设置是否合理?
  3. 小屏幕下是否有遮挡,弹出菜单和悬浮框的遮挡。弹出框的显示不完全

前端checklist
https://blog.dayday.cyou/2024/03/16/前端checklist/
作者
godbutton
发布于
2024年3月16日
许可协议