Bendi新闻
>
年度代码翻车现场 |前端代码评审问题总结
年度代码翻车现场 |前端代码评审问题总结
阿里妹导读
一、前言
二、翻车现场(CR中的常见问题)
2.1 代码规范类
2.1.1 使用魔法值
| |
危害 |
|
建议 | 使用声明后的常量替代魔法值! |
bad case
const now = Date.now();
const lastVisitTime = localStorage.getItem('last_visit_time');
if (lastVisitTime && parseInt(lastVisitTime, 10) > 24 * 60 * 60 * 1000) {
console.log('一天前来过');
}
localStorage.setItem('last_visit_time', now.toString());
const LAST_VISIT_TIME_CACHE_KEY = 'last_visit_time';
const DAY_IN_MS = 24 * 60 * 60 * 1000;
const now = Date.now();
const lastVisitTime = localStorage.getItem(LAST_VISIT_TIME_CACHE_KEY);
if (lastVisitTime && parseInt(lastVisitTime, 10) > DAY_IN_MS) {
console.log('一天前来过');
}
localStorage.setItem(LAST_VISIT_TIME_CACHE_KEY, now.toString());
2.1.2 滥用eslint-disable
| |
2.1.3 使用幽灵依赖
| |
2.1.4 未遵循no-else-return原则
function hello(condition: boolean) {
if (condition) {
return '👋';
} else {
return '👻';
}
}
function hello(condition: boolean) {
if (condition) {
return '👋';
}
return '👻';
}
2.1.5 随意的commit message
| |
|
2.2 代码风格类
2.2.1 模块引入顺序混乱
| |
|
// 第三方库
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
// 项目内的模块
import { myUtilityFunction } from '@/utils/myUtilityFunction';
import { MY_CONSTANT } from '@/constants/index';
import Dashboard from '@/components/Dashboard';
// 相对路径
import Header from '/components/Header';
// 样式
import './style.less';
2.2.2 未使用解构(destructuring)
2.3 命名问题
2.3.1 表意错误或者不明确
2.3.2 大量的拼写错误
2.3.3 命名不符合规范
2.4 函数使用
2.4.1 缺少抽象小函数(或小组件)的习惯
2.4.2 创建不必要的包裹函数
| |
const { data } = useRequest(() => {
return services.UserController.getNotification();
});
// 函数被赋值给services.UserController.getNotification后,它并不只可以被执行,也可以被当做参数传递给另外一个方案
const { data } = useRequest(services.UserController.getNotification);
2.4.3 把控不好的函数层级
2.4.5 函数存在副作用
|
2.5 不好的编程习惯
2.5.1 过度使用可选链
2.5.2 React中直接操作state
2.5.3 if条件不清晰
| |
2.5.4 在末端关注不必要的上层逻辑分支
2.5.5 组件互斥属性值的使用
2.6 缺乏服务端思维
2.6.1 接口评审只听不评
| |
2.6.2 用展示字段去做业务逻辑的条件表达式
2.7 api 使用
2.7.1 误用路由跳转
| |
2.7.2 new Promise()与Promise.resolve() 接口未择优
| |
2.7.3 React.createElement与jsx接口未择优
2.7.4 误用stopPropagation
2.8 重复造轮子
对现有轮子的不熟悉 主观上对现有轮子的不认可
| |
|
2.9 TS 类型定义问题
2.9.1 AnyScript风
2.9.2 as everywhere
2.9.3 可空? everywhere
2.10 异常处理
2.10.1 异常被吞没
|
2.10.2 忽略了接口异常时的loading处理
2.10.3 使用then catch then
三、什么是好的习惯
先消除代码编辑器和相关工具插件给你的所有警告;
不要在同一个地方跌倒,代码问题同样如此,吸收评审者给到的意见来武装自己,总归受益人是自己;
代码需要打磨设计,设计可以不完美,但不能不去思考设计;
四、写在最后
微信扫码关注该文公众号作者
来源:阿里云开发者
相关新闻
实践总结|前端架构设计的一点考究年度总结|卫哲预测:未来10年,5大趋势,要早做布局!开分即翻车!年度剧王,全是烂梗,这样打脸疼不疼?波士顿动力技术揭秘:后空翻、俯卧撑与翻车,6年经验、教训总结总结|Stream流技术在真实案例中的应用波士顿清华龙舟队2024班年度总结英格卡集团INGKAGROUP:2023财年年度总结和可持续发展报告大模型时代下的技术管理“新思维” |年度盘点与展望《完蛋!我被美女包围了》是怎么成为年度“科幻”游戏的?|年度专访互联网人理财年度总结年度总结 | 《中美法律评论》2023年文章目录汇总我的2023年度总结36氪中国股权投资机构年度名册|重磅发布当伴侣发出「色色邀请」时……|激情总结版2024年度风云车 马自达全球顶级安全评级大赢家转发|倒计时3天!MIT-CHIEF年度峰会|《最强大脑》罗伯特·戴西蒙 -- 医疗健康板块嘉宾揭晓助你「内核稳定」的12个小方法|2023年度心理学研究盘点从“出海四小龙”搅动电商风云,到 “霸总”通杀北美,中国企业卷向全球|2023年度盘点年度回顾|锐捷网络安全2023年大事记波城Newbury大街年度“无车日”又要开始啦!24年度总招聘|最新「带薪实习岗」,等你解锁!导筒现场 · 北京 | 年度港片佳作《白日之下》超前点映8199篇、2358万字、2.1亿阅读量,这是一份2023年商业白描|36氪年度精选新年购车参考 2024年度北美风云车名单揭晓