前端工程化 - CR (Code Review)

CR (Code Review) 就是代码审查， 是前端工程化的重要一个环节， 常规的代码检查都是基于语言层面的，CR 更多的是从业务层面来审查代码的质量，开发者是否考虑周全，代码设计是否合理。

CR 形式

• 线上 ：直接在 git 提交记录做标记
• 线下 ：组内同事线下开会，投屏讨论
• 参与人员 ：全员 或者 1、2个高级工程师 + leader 参与

CR 目的

• 保障代码高质量， 保障业务稳定运行
• 提升工程师编码能力，系统思维能力
• 维护团队编码思想统一，提升团队研发效率

CR 能不能全交给 AI 工具来解决 ？

Code Review 的核心目的是审查工程师的编码是否高质量且符合业务，因为每个业务都属于不同的垂直领域，且业务不同的周期，系统的关注点也不一样，不存在所谓的银弹可以适应所有的场景。Code Review 不仅仅是 Review Code , 而且是 Review 工程师的编码能力，自我 Review , 成长的过程。Code Review 对于 业务，团队，自身都极其的重要。

CR 内容

工具自动化

有一些 CR 的内容可以交给工具，在提交代码之前或者之后触发，减少人工CR的工作量

• 代码规范： ESLint、 Prettier 、注释 、 函数圈复杂度 、代码重复率
• 代码扫描： password 、密钥、ip 端口等扫描 ，引入的包漏洞扫描，空指针，内存泄露分析（后台代码居多）

人工审查

人工 Code Review 是重点，更关注的是业务，系统。个人认为需要从 业务契合 、 代码质量 、系统架构 这3个方面来切入

• 1、业务方面
  • 业务流程是否合理:
    • 页面渲染 : 接口请求顺序是否合理？模块渲染顺序？
    • 用户操作 : 提交数据顺序是否合理？数据格式？
    • 数据 : 数据的实时性要求怎样？应该用什么缓存策略？
    • 流程控制 : 是否需要业务开关、模块开关，配置配置？ 权限控制？
    • 用户体验 : 骨架屏，路由切换过度，接口请求loading
  • 业务安全
    • 基础安全 : XSS CSRF 中间人攻击等
    • 数据安全 : 安全性要求如何? 如何需要加密传输？是否能存储明文？
    • 接口安全 : 是否有防刷？重放？频控？等措施
  • 业务监控
    • 业务监控 : 业务数据，用户行为数据
    • 系统监控 : 系统运行状态，接口资源速度，性能指标
  • 后台方面: 事务设计？保障数据一致性？其他分布式系统问题（后台需要更关注）
• 2、代码质量
  • 数据结构 : 数据结构是否合理？ Map Set?
  • 函数 : 注释？ 是否功能清晰明确？是否需要拆分？复用率？
  • api : api 运用是否合理，Array.map 还是 Array.forEach ？
  • 性能优化: 防抖，节流，纯函数 等
  • 单元测试: 覆盖率怎样？
• 3、系统架构
  • 系统设计
    • 如何分层？ MVC or Modules
    • 如何扩展？ 插件思想？ 业务总线？
  • 组件设计
    • 颗粒度是否合理 ： UI 组件？ 通用组件？ 业务组件？ 接口组件？
    • 功能是否内聚 ：组件输入，组件调用
  • 库设计
    • 业务领域设计： 适合什么场景的业务
    • 模块设计:
    • 单元测试:
  • 业务设计
    • 可控制性？ 需要哪些配置项？
    • 可维护性？ 注释，流程清晰，数据流明确。
    • 可扩展性？ 未来业务发展性判断。

CR 争议

code review 都是基于开发者自我编码能力，团队在一起 code review 时可能会遇到一些争议。

• 编码规范: 保持团队统一，或者公司统一，无须争议，执行就行
• 实现方式: 只要没有性能问题，保持开放态度。
• 可维护性: 如果实现方式与可维护性冲突，以可维护性为重。
• 其他争议: leader 主导，或者投票，对事不对人，接受别人的意见。