---
theme: Chinese-red
1.简介
Code Review是代码审查。锻炼自己CR能力，学习总结。
vscode代码审查插件 CodeGeex
2.CR实践点（代码优化点)
1.判断逻辑优化
1.对象判空
// 深层对象
if (
store.getters &&
store.getters.userInfo &&
store.getters.userInfo.menus
) {}
// 优化：
// 可以使用 可选链进行优化
if (store?.getters?.userInfo?.menus) {}
2.空函数判断
props.onChange && props.onChange(e)
// 优化：
props?.onChange?.(e)
解读： 当前选中的代码是一个 JavaScript 模板表达式，它的作用是在父组件中调用名为 onChange 的 prop。在调用 onChange prop 之前，它使用可选链操作符?. 检查了两个条件： props 是否存在，以及 onChange 是否是 props 的一个方法。如果这两个条件都满足，代码将调用 onChange 方法，并将一个事件对象 e 作为参数传递给它。如果 props 或 onChange 不存在，代码将忽略这行代码，因为可选链操作符会安全地处理空值情况。
3.复杂判断逻辑抽离成单独函数
4.判断处理逻辑正确的梳理方式
采用 “异常逻辑前置，正常逻辑后置” 的方式进行梳理优化。
// 判断逻辑不要嵌套太深
function checkStatus() {
if (isLogin()) {
if (isVip()) {
if (isDoubleCheck()) {
done();
} else {
throw new Error('不要重复点击');
}
} else {
throw new Error('不是会员');
}
} else {
throw new Error('未登录');
}
}
// 优化：
// 将判断逻辑的异常逻辑提前，将正常逻辑后置
function checkStatus() {
if (!isLogin()) {
throw new Error('未登录');
}
if (!isVip()) {
throw new Error('不是会员');
}
if (!isDoubleCheck()) {
throw new Error('不要重复点击');
}
done();
}
2.函数参数优化
形参太多，会造成：
- 传实参是的时候，不仅需要知道传入参数的个数，还得知道传入顺序
- 有些参数非必传，还要注意添加默认值，且编写的时候只能从形参的后面添加
const getUserInfo = (name, age, gender, address, phone, email) =>{...}
// 优化：
const getUserInfo = (options) => {
const {name, age, gender, address, phone, email} = options
...
}
getUserInfo({name: '张三', age: 18, gender: '男', address: '北京', phone: '123456789', email: '123456789@qq.com'})
3.命名注释优化
1.避免魔法数字
如status的判断
if(status === 1 || status === 2) {...}
优化：
1.加注释
2.定义常亮
const DRAFT = 1
const FINISH = 2
if(status === DRAFT || status === FINISH) {...}
2.注释别写表面意思
3.利用命名空间缩短属性前缀
// 过长命名前缀
class User {
userName;
userAge;
userPwd;
userLogin() { };
userRegister() { };
}
优化：
// 利用命名空间缩短属性前缀
class User {
name;
age;
pwd;
login() {};
register() {};
}
4.分支逻辑优化
if else，else if，switch case 等多分支判断
// switch case
const statusMap = (status: string) => {
switch(status) {
case 'success':
return 'SuccessFully'
case 'fail':
return 'failed'
case 'danger':
return 'dangerous'
case 'info':
return 'information'
case 'text':
return 'texts'
default:
return status
}
}
策略模式优化：
// 使用映射进行优化
const STATUS_MAP = {
'success': 'Successfull',
'fail': 'failed',
'warn': 'warning',
'danger': 'dangerous',
'info': 'information',
'text': 'texts'
}
return STATUS_MAP[status] ?? status
?? 是 TypeScript 中的 “空值合并操作符”
当前面的值为 null 或者 undefined 时，取后面的值
5.对象赋值优化
如查询参数params，需要新赋值
params.page=1
params.limit=20
优化：
params={
...params, // 重点 插入原属性，否则会被覆盖
page:1,
limit:20
}
6.隐式耦合优化
例如：token这种特殊名词，定义为常量TOKEN方便维护。
参考链接： juejin.cn/post/739479…
