前端代码评审(CodeReview)
代码审查(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后缀注释:在⼀段语句后⾯后缀进⾏注释, // 前后都跟⼀个空格,⽤于对某个语句的说明。
cookie阻止好还是不阻止好l 在有处理逻辑的代码中,代码有效注释量必须在20%以上。
l ⽂件注释:⽂件注释(包括作者, 依赖关系和兼容性信息等)写在⽂件头部。
l 注释的内容要清楚、明了,含义准确,防⽌注释⼆义性。说明:错误的注释不但⽆益反⽽有害。
l 对变量的定义和分⽀语句(条件分⽀、循环语句等)必须编写注释。
6.6新技术(关注点-适⽤性和扩展学习)
l 代码使⽤新技术是否有效,是否最优,⼀起讨论学习
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论