如何做前端Code Review

·  阅读 5853
如何做前端Code Review

向互联网大厂学习,从代码格式、代码错误、代码习惯、代码优化四个角度进行前端Code Review的具体细则实施。

一、代码格式

代码格式问题可以通过自动化工具来解决。

  • VSCode格式化设置
  • 标准的 eslint 规则( 如Airbnb或公司统一推出的eslint规则) + husky( 本地pre-commit校验 )
  • 远端 CI 流水线校验(开启cache,增量校验)

二、代码错误

2.1 是否存在会导致内存泄露的代码
对于 SPA 应用,用户无需刷新浏览器,所以要想确保垃圾回收生效,我们需要在组件对应生命周期里做主动销毁。

- 存在不必要的全局变量且未及时解除引用
全局变量,除非你关闭窗口或者刷新页面,才会被释放,如果缓存大量数据,很可能导致内存泄露。
一般来说,直接绑定在vue实例上即可,组件销毁时该实例也会销毁;但没有绑定在vue实例上的一定要主动销毁。

- 闭包内部变量未被销毁
- 计时器是否及时清理
- 监听事件是否有解绑
- 第三方库的销毁函数,在页面卸载时也需要调用,比如EventBus:
- v-if 指令导致的内存泄露
复制代码
2.2 异步操作是否有异常处理
- 异步操作拿接口请求来说,大家都知道的是,使用 promise 时要有.catch处理。但使用 async/await 时,有 .catch 处理的,也有try...catch处理的使用方法。这里推荐使用 .catch。原因在于:

- 可以控制接口请求出错后,**是否要阻塞后续业务逻辑执行**。

- .catch 里的 error 能明确知道是接口请求导致的错误,而**不需要再对 error 进行分类判断**,是接口200返回后的业务逻辑处理报错还是接口报错。
复制代码
2.3 取值时是否进行了空判断、调用函数时是否进行了类型判断
2.4 存在无意义的 if else代码块或考虑漏的条件
2.5 存在无意义的 catch 代码块
2.6 是否含有安全风险的代码
2.7 硬编码

三、代码习惯

3.1 if-else嵌套不能超过4层
3.2 Don't repeat yourself
3.3 不要直接修改Object原型(或者Function, Array原型等)
3.4 回调嵌套不建议超过3层回调嵌套
3.5 函数不超过80行
3.6 通过代码展示逻辑,尽量减少注释与注释规范化
3.7 删除注释掉的无用代码
3.8 移除不必要的console.log调试日志
3.9 减少eslint-disable注释
3.10 使用空行对代码分组
3.11 命名规范
3.12 过多的非业务逻辑相关代码(如超过10行的上报, 参杂在业务逻辑里)
3.13 完善README文档,注意事项详细说明
3.14 尽量使用export而不是export default来导出,实现按需加载

四、代码优化

4.1 避免大量直接操作dom节点
4.2 避免使用delete
delete 操作符并不会释放内存,而且会使得附加到对象上的hidden class失效,让对象变成slow object。
(hidden classV8为了优化属性访问时间而创建的隐藏类)
链接参考 https://juejin.cn/post/6844903918804172814
复制代码
4.3 是否引用了不必要的npm包
4.4 尽量使用CDN地址的图片
4.5 可以使用CDN地址的第三方插件,减少包体积
4.6 频繁事件处理(查询等)使用防抖与节流
4.7 无限瀑布流等多元素事件绑定使用事件代理,减少内存使用
4.8 动画减少回流与重绘
使用transform代替left,top等值的改变
根据浏览器的渲染流程,如果引起元素位置大小的改变,需要重新进行布局计算,然后重新生成位图,交给GPU渲染展示
而transform的改变不会对元素的位置大小产生改变,而是使用已经生成的位图,对它进行旋转,缩放,移动。
复制代码
分类:
前端
收藏成功!
已添加到「」, 点击更改