PRD评审时，前端一定要考虑的十个边界场景清单

一、考虑边界情况的意义

1. 对齐产品、UI和开发同学三方的认知，避免在表述模糊的地带由于理解不一致导致验收阶段增加额外的开发成本，降低延期风险。
2. 通过对边界场景的兜底，减少线上缺陷。

二、边界场景清单

1. 明确填写项的输入类型以进行输入校验
2. 容器最大宽度和文本溢出处理方式
3. 容器过多换行的处理方式
4. 触发各类兜底页面的场景
5. 下拉选项的获取方式
6. 监听高频事件的防抖截流
7. 异步请求加载中的防御性措施
8. 多个异步请求的撤回和覆盖
9. 上下滑中固定栏的位置
10. 未来优化的可拓展性

三、边界情况详细介绍

1. 明确填写项的输入类型以进行输入校验

   1. 输入内容必须明确类型并做前端或后端的校验。

   2. 必须为整数，排除小数、字符串等情况。

   3. 必须为长度不小于1的字符串，排除空格等情况。

   4. 做好输入字符串去除左右空格的处理。

2. 容器最大宽度和文本溢出处理方式
   1. 容器宽度的计算方式，明确box-sizing是content-box还是border-box。content-box宽度和高度的计算值都不包含内容的边框和内边距，而border-box包含。
   2. 明确容器的最大宽度和高度。
   3. 文本溢出的处理方式：
      1. 换行
      2. 使用滚动条：超出宽度使用横向滚动条滑动显示。
      3. 直接截断：超出宽度直接不展示。
      4. 截断+省略号：超出部分使用省略号展示。
      5. 截断+省略号+悬浮提示全部：鼠标悬浮到文本上方后弹出全文本的提示框
      6. 截断+省略号+点击展开更多：鼠标点击按钮下拉展开全文本，分为当前页展示和新窗口展示。
3. 容器过多换行的处理方式
   1. 直接换行，右侧留白
   2. 不换行，增加横向滚动条，滚动条可选择鼠标悬浮才出现。
4. 触发各类兜底页面的场景
   1. 出现空白页的场景：
      1. 可能出现异常
         1. 网络异常
         2. 后端服务器异常
         3. 可能数据为空
      2. 原生空表无数据
         1. 无权限
         2. 筛选条件过滤
5. 下拉选项的获取方式
   1. 选项来源：
      1. 后端通过接口提供
      2. 前端写死
      3. 通过 KConf 配置
   2. 筛选栏内的文本提示
   3. 下拉框无选项的默认展示
   4. 是否下拉展示搜索栏
      1. 搜索命中的部分文案是否高亮
      2. 选项是否高亮
      3. 上次搜索的输入文本是否保留
6. 监听高频事件的防抖截流
   1. 浏览器宽度变更
7. 异步请求加载中的防御性措施
   1. 点击搜索按钮后，使用loading或disabled锁定容器，避免用户重复操作。
8. 同一接口多个异步请求的撤回和覆盖
   1. 同一接口发送多个异步请求，会导致先发后至的数据覆盖后发先至的数据。
9. 上下滑中固定栏的位置
   1. UI稿中出现滑动场景下的按钮，一定要确认按钮是否是随上下滑滚动。
10. 未来优化的可拓展性
    1. 在前期评审和技术方案确认时，组件做到高内聚低耦合，为后续优化留出扩展空间。
    2. 关键逻辑要写出清晰的注释，便于理解。