前端代码质量保障之代码review

经验丰富的程序员和通常程序员之间的最大区别，不只体如今解决问题的能力上，
还体如今平常代码的风格上。掌握一门技术可能须要几月，甚至几周就够了。 
好的习惯风格养成却需数年。


        团队成员之间须要合做，代码须要往后可维护，个体的能力和习惯存在差别。 
故保证代码质量及风格，就须要制定必定的规则，按项目周期(最好是在上预发以前)组织进行集体代码review。

一 目的

1    保证代码质量 
        本身的代码要给别人看，在开发过程当中就会刻意的注意一些规范，写法及逻辑严谨性。

        2    扼杀潜在的风险
        程序员会去自测，即便有某种状况分支遗漏, 在讲解的过程当中其余同窗也能发现。

        3    互相学习提升
        高手是如何写出逻辑严谨，简洁易懂的代码的。方便对照本身的不足，逐步的纠正。

 

 

二 如何推进

1 分组结对

1  通常团队大前端，后端 确定有多名同窗。
   能够按‘同项目，模块或老司机带新’ 的模式进行分组。并指定各个小组组长(最好轮值)。

   2  小组长，负责开发过程当中规范提醒 及 发起相互review。

2 集体review

1  每次review最核心的代码,控制好时间。

   2 各自讲解本身的模块，复杂业务最好配有流程图。

3 开发工期

要把 ‘代码review’及 代码优化也评估进去。

4 打分制(下面会继续 讲解打分细则)

1  评判代码好坏，仍是须要一个衡量标准，能够采用打分制度。除同个项目组成员外其他项目组同窗，均要给该讲解人打分。

   2  打分须要注明：一  须要修复和改进的地方； 二  值得学习借鉴的地方。
   并统一由会议记录人，邮件抄送相关人员，开发者去落实修改，组长负责跟进验收。

 

 

三 自查(测)清单

前面说了，要自测。那么咱们大概能够从以下方面切入：

1 常规项

1 代码可以工做么？它有没有实现预期的功能(需求)，逻辑是否正确等。
2 全部的代码是否简单易懂？ 是否尽量的模块化了？组件化了？是否存在多余的或是重复的代码？
是否有能够被库函数替代的代码(尽可能用集团自有的)？ 不重复造轮子。
3 代码符合你所遵循的编程规范么(详见 我另外html,js,css编码规范的文章)？这一般包括大括号的位置，变量命名和函数名，行的长度，缩进，格式和注释。
4 去掉大段被注释掉的代码(如有用能够先提交到git上,之后可回滚)
5 循环是否设置了长度和正确的终止条件？ 按钮是否有控制单次点击,不重复提交？
6 是否有考虑调用api接口缓存问题？是否有能够删除的日志或调试代码？
……

2 安全

1 全部的输入是否都进行了检查（检测正确的类型，长度，格式和范围），考虑了xss攻击和js脚本注入。

2 引用导入的第2、三方依赖包，是否存在不可用 和 版本升级致使功能不可用的风险。
是不是GPL协议的源码( 不能用，不然会要求使用者的代码也开源)

3 本机保存的数据，是否有泄漏的隐患。（铭感数据不作本地存储，即便保存也须要加密)。

4 全部的请求连接是否都是用https，包括图片地址。

5 发布以前清理log日志 和 敏感注释。尤为是前端同窗。

3 文档

1 是否有注释，而且描述了代码的意图？数据结构和计量单位是否进行了解释？
2 对很是规行为和边界状况处理是否有描述？
3 第三方库的使用和函数是否有文档？
4 是否有未完成的代码？若是是的话，是否是应该移除，或者用合适的标记进行标记好比‘TODO’？

4 性能速度

1 页面加载显示是否超过3s(用户超过3s 就会不耐烦，除非你有很友好的提示。。。)
2 js代码 是否有明显影响性能的逻辑 和 计算。
3 同个组件 或者 页面布局层级嵌套尽可能不要太深，保持简洁性。

 

 

 

四 评分标准及规则 (5大维度，总分100)

1 需求功能覆盖率 --------权重3（30%)

9-10分：代码严谨、逻辑分支覆盖全面 无遗漏
6-8分：无关键逻辑分支遗漏，普通遗漏不超过2次
0-5分：关键逻辑分支遗漏1次及以上 或其余分支遗漏2次以上

2 代码结构耦合度--------权重3（30%)

9-10分：结构清晰，模块独立（数据融合），模块间关联简单，模块内完成特定子功能
6-8分：模块间中度藕合（控制藕合）
0-5分：模块间强藕合，模块内功能复杂

3 健壮性---------2(20%)

9-10分：性能稳定，异常考虑周全，没有安全注入风险----1 页面打开速度不超过3s 2 破坏性测试状况下依然稳定加载
6-8分：异常处理不到位（undefined等），存在性能问题，但不影响关键流程，不宕机
0-5分：关键流程存在问题，有宕机风险

4 简洁度------1(10%)

9-10分：没有冗余代码，没有重复造轮子，单个函数功能单一,建议不超过20行,无多余导入的包或类
6-8分：存在冗余，重复代码
0-5分：广泛存在冗余，重复代码

5 可读性------1(10%)

9-10分：严格执行集团编码规约，易于理解，命名规范，注释清晰 
6-8分：存在阅读障碍与阅读困难的状况
0-5分：关键逻辑与复杂代码缺少注释，理解极度困难

ps: 分数最终计算方式能够这么着
1 总分按100分算，单项最终得分=评分*权重 （例如‘覆盖率项得总分27=9*3） ，而后把5项的总分加起来。



2 3.75的标准就是各项加起来90分+ ;3.5的标准就是加起来80分+

 

补充：
1    方法的请求  和  数据处理  尽可能分离, 抽离 (一个方法只作一件事情)。

2    相关对象，作下 容错 或 默认值 处理。

3    主要review  1  异常状况分析处理       2  主流程业务有无遗漏。