1. 制定公司的前端代码规范标准
可以借鉴腾讯前端和百度前端代码规范
- html规范
- js规范（书写、换行、缩进、标点）
- css规范
- 图片规范（格式、大小、质量、引入方式）
- 命名规范（目录、文件名、className、JS变量）
- 注释规范
- 模块化规范（CJS/ESM）
- 成功和错误提示规范
- 框架代码规范（VUE\REACT文档中的规范）
- 代码整洁（eslint）：《代码整洁之道》
2. 开发流程规范化
- 需求分析，编写需求文档
- 开需求评审会议
- 确定需求以及UI图的拍板（这个找UI的沟通就行，如一些与需求又出入的地方或者奇葩样式，直接找产品）
- 前端dev部署
- 前端根据UI图开始开发静态页面
- 后端和前端的接口联调（找后端拿api文档）
- 代码review
- 提测阶段
- 测试验收阶段（前端这个时候缺陷是最多的，这个不用怕，正常的）
- 预发环境提测
- 提测阶段结束（项目封板，这个时候是不允许提交其他任何代码到master上的）
- 生产阶段（上线一般定在周四，如果出现问题，周五可以回滚代码）
3. 质量问题分析
需求理解错误
客户描述、项目经理理解、产品经理理解、技术负责人设计、开发交互实施、测试人员测试，顾问的诠释之间的差异
程序编写失误（BUG）
一些隐含的BUG没有充分被测试出来。
适配和兼容性
比如屏幕设备的视频，浏览器的兼容性等等
特殊状态
比如在上线后程序崩溃，宕机
4. 质量保障措施
需求理解错误
- 预调研（梳理核对需求，调研关联代码，编写原型和伪代码）
- 需求、方案、设计评审会议（方案设计：流程图、时序图、外部依赖、适配和兼容性）
- 验收标准制定
- 需求复用（需求点尽可能规范化、通用化，提升需求的可复用性，预备多种方案可供选择）
程序编写失误（BUG）
- 静态、编译检查（使用工具：husky等git hooks工具，使用
pre-commit钩子 (.git/hooks/pre-commit) 配合eslint、tslint） - 代码走查、审查（个人桌面代码检查）
- 代码评审会议（多个人可能会发现不同问题）
- 测试
适配和兼容性
- 方案、设计评审会议中提前制定
- 测试
特殊状态
- 高强度压力测试
- 大规模Beta测试
- 监控机制（性能监控）
- 回滚机制
5. 代码review清单
预测试
- 明确任务需求和实现效果（需要产品和UI协同）
- 单元测试、集成测试通过
- 本地开发环境中，eslint 代码规范检查，无报错无警告
本地自测
- 基本功能正常；
- 界面样式正常；
- 浏览器兼容性和系统兼容性尽量满足
- 极端情况正常：错误输入（数据类型不对等）、数据量巨大（1000行数据）、请求异常处理（403-404-500）
- 代码兼容性：是否兼容老代码和老数据结构（如果不能兼容，至少界面不报错）
代码走查
- 多余的空行注释删除
- 命名规范：函数名变量名不规范、代码可读性（避免生僻Hook）
- 性能优化：减少时间空间复杂度；减少全局变量；React 中，减少 render 次数（减少不必要的state，生命周期函数优化等）
- 代码安全：代码是否存在 XSS，CSRF 攻击
6. 质量保障建设
根据以上一些列措施，建设公司的质量保障体系，规范化项目开发流程。
本文固定连接：https://code.zuifengyun.com/2022/09/2986.html，转载须征得作者授权。