前端代码评审的意义和如何做代码评审

分类:其他来源:站内 最近更新:2020-09-10 20:32:26浏览:241留言:0

1、为什么要代码评审?

  • 学习机会

  • 知识传递

  • 保证质量

  • 细化提测功能点

  • 放松休假

  • 装逼的过程

2、代码checklist。typescript

NO检查点
1

基本

1.代码能够成功构建,并执行

2.代码规范是否在严格执行(命名、缩进、函数长度限制、格式、注释)

3.项目规范是否在严格执行(目录命名规范、等)

4.是否存在重复的代码(复制粘贴或者重复开发,有库函数的地方调用库函数)

5.是否有需要模块化的代码

6.代码逻辑方面(未关闭的流,未结束的循环)

7.日志是否被正确的使用

8.其他(这只是demo,大家脑补吧)

2

安全

1.是否所有的输入项都进行了检查(长度、类型、格式、范围、防止脚本注入)

2.用户拼接参数,是否会有漏洞

3.防攻击的代码是否被正确的使用(xss,csrf,sql注入,每种语言都有自己的成熟的解决方案)

 

3、检查清单细分

前端安全

  1.  所有的用户可以在页面中输入信息的地方,是否做了防 XSS 以及特殊字符的过滤处理?

  2.  与后端接口交互,获取信息使用 GET 方式,传送信息使用 POST 方式。后端接口应对各项参数做校验。前端也要判断接口是否返回合法、正确。

  3.  开发与 DOM 操作有关的代码时,是否对 DOM 不存在或者被人为修改的情况做处理?

  4.  获取数据和信息时,是否对类型做过处理和转换并设置为空时的默认值?比如:var num = parseInt(Str);

  5.  在所有会发生错误的地方,是否编写了错误处理逻辑?比如:阻止继续执行、显示错误信息、记录错误日志和信息等。

  6.  代码里获取 window.location 相关属性的地方,是否对里面的 XSS 字符做了过滤处理?


前端性能

  1.  JS 代码是否尽量放在底部?CSS 代码是否尽量放在了顶部?

  2.  是否部署 CDN 或者开启了缓存功能?

  3.  上线或者发布前,是否对静态资源进行打包、压缩处理?

  4.  正确使用预加载、懒加载等技术手段提高性能。

  5.  是否对图片等资源进行压缩以及 CSS Sprite 处理?


代码质量

  1.  你的代码是否遵循团队要求的代码规范?

  2.  是否有冗余代码没有注释掉或者删掉?例如:删除或者注释 console.log 避免低端 IE 报错等。

  3.  关键功能是否还有优化的空间?

  4.  代码是否简单易懂,逻辑清晰,模块化?

  5.  变量名是否简单易懂?是否拼写正确?

  6.  CSS 属性是否有拼写错误?

  7.  HTML 标签是否书写正确,是否嵌套正确?

  8.  JS 代码是否经过 JSLint 或者 ESLint 等工具校验?

  9.  是否将核心功能尽可能独立,从而避免其他功能出现问题影响到核心功能?


注释

  1.  是否在重要功能附近添加合适的注释?

  2.  注释是否包含了开发人员信息、开发时间、开发者联系方式以及相关功能说明?

  3.  换位思考,你能根据你的注释推断出下面代码的功能吗?

  4.  代码里是否还存在 TODO ?是否可以删掉或者完善功能?

  5.  可能产生意外情况的地方是否留下说明?


测试

  1.  代码逻辑是否正确、可用、符合需求?

  2.  在进行各种操作的时候,是否有报错出现?

  3.  是否有资源加载出错或者失败?

  4.  是否按照项目要求,使用相关设备以及浏览器进行测试和体验?

  5.  是否对边界条件以及看起来比较极端的情况做过测试?


故障处理

  1.  是否考虑过如果发生线上故障,如何做回滚处理?处理什么文件?

  2.  功能与功能之间是否足够独立?是否设置开关?当某个功能发生故障是否可以通过开关关掉?


4、评审形式

会议室代码评审

开发人员坐在一个会议室,轮流进行代码评审。即,同一时刻,多人评审某个人的代码。 

组长责任制

有每个小组的组长对代码进行评审,并按照组开小会

checklist评审

由部门高技术人员按照检查表,找出优秀的和不好的代码,开会讲解;


没有上一篇

下一篇:常用的正则表达式

0

发表评论

评论列表(0)

  • 暂时没有留言