我正在参加「掘金·启航计划」

• 主要是将过往需求研发细节沉淀，查缺补漏。
• 核心是前端通过技术、交互等层面增加投入，提高前端交付质量，减少后续产品和测试的压力。
• 有些只有前端能考虑到的技术应用场景，需要前端自己把关，否则在产品表现上会产生异常。

提示： ⚠️ 带警告符合，属于重点必查项。

技术

• ⚠️ 不要使用 replaceAll，利用正则 replace(//g, '') 代替，原因是兼容性问题。
• 用 Promise 加载控制，状态要在 finally 变更加载状态，如果兼容行有要求，就要在 then 和 catch 做。
• 涉及 hover 鼠标监听的交互，做防抖后，需要自测快速移动场景，很大概率因为防抖导致快速移动鼠标响应失败问题。
• 使用 useCallback 和 useMemo 这种依赖式 hook，需要注意嵌套使用的问题，比如使用 useCallback 封装方法时，函数内使用了 useCallback 封装的其他方法，因为两者的依赖不一致，导致外层函数执行时，内层的函数始终是旧的，存在隐性风险。

交互

• ⚠️ 文案错别字问题，文案的修改和增加，需要充分理解。
• ⚠️ 新建按钮，需要做防抖。
• ⚠️ 批量接口操作，需要做并发控制。
• ⚠️ 删除操作，需要加一步确认的弹窗，如：“确认删除吗？”。交互稿如果没有说明，需要和产品进一步确认。
• 表单是否添加回车键监听，具体细节需要和交互进一步确认。
• 操作成功，需要使用 Toast 提示，特殊场景需要和产品确认，最好的方案是在请求层封装。
• 文件上传相关需求，需要找产品确认文件大小和类型限制。
• 有省略号出现的场景，需要保证 tip 完善。
• 考虑所有请求场景的异常处理。\

视觉

• 输入框，确认 focus、hover、active 等视觉显示符合统一标准。
• 需要考虑文本溢出场景。
• 写样式，遵循写少不写多原则。
• 自适应测试，确保三种标准下，页面视觉正常。可参考图例所示进行配置：

small: 1280 X 720; middle: 1440 X 900; large: 1920 X 1080;

业务性

• ⚠️ 主流程功能是否能正常使用
• 两个窗口同时操作，删除、增加、修改是否存在冲突异常问题。
• 业务逻辑，是否能自洽
• 通用化设计以满足现有业务为基准，不做过多超前设计，超前设计不等于业务有价值的设计

技术性（可选）

• 控制 re-render 范围。可学习使用工具，进行检测 react 性能调试工具
• 数据搜索使用ES6的 find ，而非 filter。(find 不兼容 IE)
• 尽量使用 React hook 形式编码，对业务逻辑进一步抽象进行拆分，存储在当前文件上下文或同目录文件夹下。
• 不要轻易使用 @ts-ignore 和 esling ignore。
• 批量接口请求，进行分批请求或加入锁，控制并行数目。
• 使用 Typescript 进行开发比 Javascript 体验好。
• 公共函数方法，使用 TS 进行编写，并完善对应泛型。
• 删除非必要的 console.log，如果用，可使用 console.error
• 前端通过请求存储 html 的，需要做 xss 防护。
• 难理解或具有关键性的代码，添加注释说明，自己需要对注释负责，切忌错误注释。

大家如果有好的想法，也可以评论区分享一下。如果有疑问或异仪，也可以在评论探讨。