阿里妹导读
一、前言
二、翻车现场(CR中的常见问题)
2.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());
| |
| |
function hello(condition: boolean) {
if (condition) {
return '👋';
} else {
return '👻';
}
}
function hello(condition: boolean) {
if (condition) {
return '👋';
}
return '👻';
}
| |
|
2.2 代码风格类
| |
|
// 第三方库
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.3 命名问题
2.4 函数使用
| |
const { data } = useRequest(() => {
return services.UserController.getNotification();
});
// 函数被赋值给services.UserController.getNotification后,它并不只可以被执行,也可以被当做参数传递给另外一个方案
const { data } = useRequest(services.UserController.getNotification);
|
2.5 不好的编程习惯
| |
2.6 缺乏服务端思维
| |
2.7 api 使用
| |
| |
2.8 重复造轮子
主观上对现有轮子的不认可
| |
|
2.9 TS 类型定义问题
2.10 异常处理
|
三、什么是好的习惯
先消除代码编辑器和相关工具插件给你的所有警告;
不要在同一个地方跌倒,代码问题同样如此,吸收评审者给到的意见来武装自己,总归受益人是自己;
代码需要打磨设计,设计可以不完美,但不能不去思考设计;
四、写在最后