前端代码评审（Code Review）

代码审查（Code Review)是软件开发中常用的手段，和QA测试相比，它更容易发现和架构以及时序相关等较难发现的问题，还可以帮助团队成员提高编程技能，统一编程风格等。

一．审查原因（Why）

持续、有效的开展代码走查，将会收获许多收益，具体表现在：

l 能及时发现代码中的Bug，保证版本质量。

l 提升代码的可读性、可维护性，建立团队共同的编码风格。

l 有利于知识共享，打破技能壁垒，避免单点故障。

l 通过展示自己的优秀代码和设计思路，提升了个人成就感。

l 通过讲解自己的代码，对个人沟通能力也是一种提升。

l 提高开发者的对编码的责任感。

二．审查对象内容（What）

前后端所有研发人员审查周期内提交的代码及数据库脚本

如代码数量过多可挑选部分重要功能模块进行

三．审查人员（Who）

代码走查不只是开发人员的事情！需要多种角色同时参与，因为走查活动不仅仅要看功能是否实现了，还要看代码和设计是否一致？测试用例是否完备和有效？

1. 主持人（老王）

负责主持整个走查活动，控制时间和进度。

2. 讲解人（被审查研发人员）

负责对走查的代码进行讲解。

3. 评审人（其他研发人员，测试，UI）

负责对走查代码提出问题，建议。

四．审查地点（Where）

公司会议室

五．周期计划（When）

一周一次，时间每周四下午17:30

六．审查规范方法（How）

6.1编码习惯：（关注点-框架使用与基本功）

l css、js、image等静态文件应该放在约定的目录里面。

l 在页面中尽量避免写入行内样式，即style=“”。

l js语法中语句结束采用分号结尾，变量声明后必须用分号结尾。

l 单行注释语句规则：双斜杠后必须跟一个空格、缩进与下一行保持一致。

l 多行注释语句规则：对难以理解的代码段或者可能存在错误的代码段等可以采用多行注释（/* */），每一行以*开头，并且*后跟一个空格。

l 引号规则：一句代码中只使用一种引号则双引号优先，否则同意最外层使用单引号。

l 变量命名：变量采用驼峰式命名且首字母小写（除了对象的属性以外），定义后没有被使用的变量要删除。

l 函数规则：无论是函数声明还是函数表达式，“(”前不要空格，但‘’{‘’前一定要有空格。函数调用括号前不需要空格，立即执行函数外必须包一层括号。

l 数组、对象的规则：两者最后均不要有多余的逗号；对象以缩进的格式书写，切忌书写在同一行；对象属性名不需要加引号。

l 在同一个函数内部中，局部变量的声明必须定义在顶端。

l 除了三目运算符外，其他的（if、else等）禁止简写。如果if (true) alert("alert")。

l 在需要以为{ }闭合的代码段前增加换行，如for、if。

l 不允许把多个短语句写在一行中，即一行只写一行数据。

l 函数中传入的参数必须具有有效性，对特殊的入参必须进行说明。

l 尽量减少循环嵌套层次，尽量避免大于三层的循环。

6.2业务实现：（关注点-设计思路与业务逻辑）

l 如果类似的逻辑被使用了多次，应该把它写成一个函数，然后再多处调用。

l 如果类似的逻辑被多个模块使用且没有复杂的关联性，应该把它写入静态js文件，然后在使用到的模块中进行引用后再使用。

l 强制代码中禁止出现IP地址，以便在三个环境当中均可以正常使用。

l 强调代码的单元测试

l 任何新加的代码不应该破坏已有的代码。

6.3安全：（关注点-系统安全性sql注入等）

l 任何代码都不能执行用户的输入，除非转义过了。这个常常包含 JavaScript 的 eval 函数和 SQL 语句。

l 对于那些在短时间内提交非常多请求的方法，可以采用防抖或者节流来控制请求次数，或者采用loading来阻止用户多次点击。

l 发生故障时，尽量少的暴露问题所在，只向用户返回一般的信息，比如登陆失败不应区分具体失败原因（用户名不存在、密码错误、密码已过期等），应采用统一的失败提示（错误的用户名或密码）。

l 页面标签中应该尽量避免使用 iframe。

6.4性能：（关注点-系统运行消耗和可扩展性）

l 所有不需要的变量应该及时的删去；尽量减少闭包的使用；如果在代码中使用了闭包，则必须在退出函数之前，将不使用的局部变量全部删除，或者将变量赋值为null。

l 尽量合并和压缩css以及js文件以减少http请求次数以及减少请求资源的大小。

l 尽量使用字体图标或SVG图标来代替传统的png图。因为字体图标或者SVG是矢量图，是由代码编写出来的，放大后不会变形，而且渲染速度快。

l 避免使用iframe，不仅不好管控样式，而且相当于在本页面又嵌套其他页面，消耗性能会更大（加载其他页面的资源）。

l 样式中给图片设置尺寸。如果图片不设置尺寸，首次载入时，占据空间会从0到完全出现，上下左右都可能位移，发生回流。

l 注意控制Cookie大小和污染，因为Cookie是本地的磁盘文件，每次浏览器都会去读取相应的Cookie，所以建议去除不必要的Coockie，使Coockie体积尽量小以减少对用户响应的影响。

6.5注释：（关注点-代码可读性注释清晰完善）

l Js单行注释：在代码上面注释，必须独占一行。// 后跟一个空格，缩进与下一行被注释说明的代码一致。

l Js后缀注释：在一段语句后面后缀进行注释， // 前后都跟一个空格，用于对某个语句的说明。

l 在有处理逻辑的代码中，代码有效注释量必须在20％以上。

l 文件注释：文件注释（包括作者, 依赖关系和兼容性信息等）写在文件头部。

l 注释的内容要清楚、明了，含义准确，防止注释二义性。说明：错误的注释不但无益反而有害。

l 对变量的定义和分支语句（条件分支、循环语句等）必须编写注释。

6.6新技术（关注点-适用性和扩展学习）

l 代码使用新技术是否有效，是否最优，一起讨论学习

CTO老王