某一线前端小组长的 Code Review 分享(实习生专题!)

·  阅读 6560

☀️ 前言

大家平时网上搜索能搜出一堆Code Review 实践、Code Review 流程、如何如何 Code Review 等等。好像实际的 review 记录并不多,恰好本人有幸担任前端小组长一职,平时摸鱼就去偷偷看看大家又写了什么优秀代码。所以今天就由小弟我,给大家分享一下,小厂一线前端平时写的代码😸

作者能力有限,里面的评论不一定十分正确,仅做记录,抛砖引玉,以供学习参考~

这不,公司最近来了几位实习生🤩,终于又有素材了hhh,就挑选整理了一些典型问题供大家学习参考~看看自己有没有也犯同样的错误

本文是该系列的第三篇
上一篇在这里:某一线前端小组长的 Code Review 分享(第二弹!)

💻 Talk is cheap. Show me the code!

项目背景:

  • react 16.8+
  • antd@4

抽取的公共方法不够通用

这个方法主要功能是想格式化时间戳,但是有一些问题。只支持输出固定的格式(yyyy/mm/dd),另外也没有对输入的 time 参数进行合法性校验;

修改后如下:

export function transformTime(unixTimeStamp?: number, formatter = 'YYYY/MM/DD HH:mm:ss') {
  if (!unixTimeStamp) return '-';
  const timeStamp = unixTimeStamp * 1000;
  return moment(timeStamp).format(formatter);
}

串联请求大量接口

这里的接口请求实际并没有互相依赖关系,由于使用了 await 将导致接口一个个串联发出,导致页面等待时间过长。

子组件抛出太多 props

大家看到这样一堆 props 的组件是不是很头疼,所以尽量规划好数据的管理,高内聚低耦合,子组件能内部消化的状态就内部消化;

声明了className 又用了内联 style

switch 的 return 和 break 混用

有 return 就不用 break 了,另外文件也没有格式化。公司项目本身是有强制要求 prettierrc 规则的,不知道什么原因居然手动关了;

无脑复制视觉图里的参考代码

不熟悉组件库api

项目是有使用 ant design Form 表单组件的,可能没有过一遍文档就上手了。

👋 写在最后

说实话现在的实习生还是挺强的,大一大二就早早开始接触前端了,更多的只是缺少一些项目规范和第三方库的使用。希望各位实习生在新的毕业季能拿到更多的大厂offer!

好啦,本篇文章就分享到这里,整体内容还是稍微零散,对于没有基础的同学可能不太友好,不过如果大家看完觉得有所收获,可以留言点赞评论!后续我会继续抽空记录,争取出一系列文章~ /撒花🎉🎉🎉

分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改