前端代码质量保障体系

1. 前端代码质量保障体系 2021-10-24

2. 团队介绍

3. 重点方向

4. 目录质量体系线上 & 线下 01 原则与目标建立规范体系的初衷 02 具体规范详细介绍代码规范 03 执行与推广如何有效落地 04

5. 质量体系- 线上监控

6. 线上监控隐去内部系统截图，具体内容为： • 上线准入卡点 • 打点与日志 • 监控大盘 • 报警 • oncall机制 • 报警有效性治理 • 长期跟踪

7. 02 原则与目标

8. 背景团队规模急剧扩大，人员经验有差距，风格不统一项目经手人员较多，代码可维护性降低

9. 规范制定原则尽量细致严格文档详细、示例遵守规范贴近业务实际长期维护确保落地

10. 规范制定原则- 细致严格

11. 规范制定原则- 文档详细 1.规则准确描述 → 2.错误正确示例 → 3.特殊场景说明 → 4.不合规范的风险

12. 规范制定原则- 文档详细 1.规则准确描述 → 2.错误正确示例 → 3.特殊场景说明 → 4.不合规范的风险

13. 规范制定原则- 文档详细 1.规则准确描述 → 2.错误正确示例 → 3.特殊场景说明 → 4.不合规范的风险

14. 规范制定原则- 贴近业务

15. 规范制定原则- 贴近业务

16. 规范制定原则- 长期维护整体基于Airbnb的规范通过文档形式标注被覆盖的规则

17. 规范与实践编码风格 React规范 TS规范 • 无关对错，风格统一 • 减少心智负担 • 基础 • 追求简单 • 推崇函数式编程 • Hooks规范 • 可维护性，易扩展 • 使用stage 3及以上的规范 • 最佳实践 • 贴近业务 • 充分利用TS特性 • 常见问题

18. 规范与实践- 编码风格编码风格 • 无关对错，风格统一 • 追求简单 • 可维护性，易扩展 • 贴近业务

19. 编码风格- 文件命名

20. 编码风格- 变量命名

21. 编码风格- Module引入顺序

22. 编码风格- React风格

23. 编码风格- 可维护、易扩展

24. 规范与实践- TS规范 TS规范 • 减少心智负担 • 推崇函数式编程 • 拥抱新规范 • 充分利用TS特性

25. TS规范 -如何切换 1. 先行调研 2. 工具支持 3. 学习分享  基础应用  进阶使用  常见问题总结实践总结

26. TS规范- 减少心智负担

27. TS规范- 函数式编程可控的副作用

28. TS规范- 函数式编程引用透明 What is Functional Programming?

29. TS规范- 保持更新 ES2019 ES2021 • Object.fromEntries • Promise.any • Array.prototype.flat & Array.prototype.flatMap • Logical Assignment Operators (a ?? (a = b) => a ??= b) • String.prototype.trimStart & • Numeric separators (let amount = 1_234_500; // String.prototype.trimEnd 1,234,500) ES2020 ES2022 • Dynamic Import • Top-level await • BigInt • Class Fields (#privateValue) • Promise.allSettled • At • Optional Chaining(a?.value) • Class Static Block • Nullish coalescing Operator(??)d 更多内容参考：ts39/proposals /finished-proposals.md

30. TS规范- 数组新方法谨慎使用下列方法 • pop / push • shift / unshift • reverse • sort • splice

31. TS规范- 补足ES

32. TS规范- Generic

33. TS规范- 常用工具类 • Partial<Type> / Required<Type> • Readonly<Type> • Record<Keys,Type> • Exclude / Extract • Pick<Type, Keys> \ Omit<Type, Keys> • ReturnType \ Parameters Utility Types

34. 规范与实践- React规范 React规范 • 基础 • Hooks规范 • 最佳实践 • 常见问题

35. React规范- 基础

36. React规范- useState & useReducer

37. React规范-useEffect

38. React规范-useEffect

39. React规范- 副作用问题副作用只能产生于useEffect或useLayoutEffect中，其他位置禁止产生

40. React规范-useRef 错误示例错误示例——ref.current作为依赖

41. React规范-StrictMode 示例

42. React规范- 性能优化示例

43. React规范- 性能优化

44. React规范- 性能优化完整解释错误示例正确示例

45. React规范- 常见问题 React Hooks Q&A

46. React规范- 常见问题完整解释示例 React Hooks Q&A

47. React规范- 其他推荐的自定义hooks集合： aHooks 关注的方向 Concurrent Mode Automatic batching startTransition

48. 04 执行与推广

49. 执行与推广- 整体思路自动化流程化奖惩机制 Lint 新人课程试卷考核 Git Hook 人才培养事故盘点代码扫描全面CR 每周MVP

50. 执行与推广- 自动化自动化工具链： eslint + prettier + husky + lint staged

51. 执行与推广- 自动化自动化工具链： eslint + prettier + husky + lint staged

52. 执行与推广- 自动化自动化工具链： eslint + prettier + husky + lint staged

53. 执行与推广- 流程化

54. 执行与推广- Code Review

55. 执行与推广- 人才培养 • 整理“错题集”，团队内部分享 • 整理常见的编程技巧、设计原则和设计模式的应用案例 • 学习业界优秀的设计方案，从模仿到掌握

56. 执行与推广- 奖惩机制隐去内部系统截图，主要内容为统计每周的CR耗时、评论字节数、Approve总数

57. 执行与推广- 奖惩机制

58. Thanks Q&A