最近做了一些代码的整理工作以及有时候有跟同事沟通一些方案的实现，然后发现了一些问题，这边分享出来，希望对大家有所帮助。
衡量代码质量的唯一有效标准：WTF/min —— Robert C. Martin
我们编写的代码，除了用于机器执行产生我们预期的效果以外，更多的时候是给人读的，这个读代码的可能是后来的维护人员，更多时候是一段时间后的我们自己。不知道你们有没有感觉，我经常在几周或者几个月后看到自己的代码，会想这是什么东西，这怎么会是我写的呢。我们自己看自己的代码，都会有这种感觉，更别提给别人看了。
那么好代码的最明显的标志就是可读性。
1、命名
变量命名： 名词
// 表示选中的状态
// bad
check select
// good
checked selected
变量名不要使用自创的缩写
// bad
stus
// good
students
// bad
pwd
// good
password
特殊的常量需要声明
// token过期时间
const EXPIRED_MINUTES = 20
// 使用枚举
// 状态
// 如果在代码中写 0 或者 1的话，很容易出错，而且需要阅读者去猜哪个代表激活，哪个代表锁定
enum Status = {
ACTIVITED,
LOCKED
}
函数命名：动词/动词+名词
// 获取数据
// bad
const dataAHandleChanged = () => {}
// good
const handleDataAChanged = () => {}
函数命名使用清晰明了的方式
# 判断型函数
- 表示是否符合的状态——is
- 表示能否执行的状态——can
- 表示是否包含的状态——has/includes/contains
- 表示是否需要的状态——should/needs
eg: shouldUpdate hasPermission
2、使用ES6语法
ES6 展开运算符
let params = {
name: "xxx",
age: 25,
sex: "male",
birthday: "2022-01-04",
address: "xxx"
}
// bad
params.name = "yyy"
params.age = 26
params.sex = "female"
// good
params = {
...params,
name: "yyy",
age: 26
sex: "female"
}
字符串拼接使用``
// bad
const fullName = firstName + ' ' + lastName
// good
const fullname = `${firstName} ${lastName}`
使用es6数组方法
const users = [{
id: 1,
name: '张三'
}, {
id: 2,
name: '李四'
}]
const selectedIds = [1];
// bad
const selectedUsers = selectedIds.value.filter(item => {
return (
selectedIds.findIndex(id => {
return item.id === id;
}) !== -1
);
// good
const selectedUsers = users.filter(id => selectedIds.includes(id))
尽早return
// el-form validate
// bad
xxx.validate(valid => {
if (valid) {
xxxxx
xxxx
xxxxx
}
})
// good
xxx.validate(valid => {
if (!valid) {
return
}
xxxxx
xxxx
xxxxx
})
1.如果没有传入参数 fruit，抛出错误
2.接受 quantity 参数，并且在 quantity 大于 10 时打印出来
function test(fruit, quantity) {
const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
// 条件 1: fruit 必须有值
if (fruit) {
// 条件 2: 必须是red的
if (redFruits.includes(fruit)) {
console.log('red');
// 条件 3: quantity大于10
if (quantity > 10) {
console.log('big quantity');
}
}
} else {
throw new Error('No fruit!');
}
}
// 测试结果
test(null);
// error: No fruits
test('apple');
// print: red
test('apple', 20);
// print: red, big quantity
使用策略模式
// bad
if (a === '1') {
...
} else if (a === '2') {
...
} else if (a === '3') {
...
} else if (a === '4') {
...
}
// good
obj = {
'1': () => {...}
'2': () => {...}
'3': () => {...}
'4': () => {...}
}
obj(a)
先实现功能，然后再优化
如果一个功能比较复杂，实现之后可以看一下是否有重复的或者逻辑相似的代码，或者是否发现嵌套层级过深，这种情况下就可以进行优化，比如提取相似代码，尽早返回之类的优化手段
3、ts建议
简单ts类型不用声明类型
// bad
const disabled = ref<boolean>(false)
// good
const disabled = ref(false)
ts类型文件放置
1、全局类型，比如IPaginateData, 可以使用declare声明，放在全局ts文件中
2、接口和页面都需要使用的类型，放在接口文件中，调用接口时引入使用
3、只有页面单独使用的，可以写在当前文件中，或者页面文件夹下新建文件index.d.ts
4、关于如何问问题
我们问问题的时候经常会陷入x-y问题中，x-y问题是这样的
- 1、想要解决x问题
- 2、觉得方法y可以解决x问题
- 3、不知道方法y怎么做
- 4、询问他人y如何实现
我们问他人问题的时候，可以这样：
- 1、说明x问题
- 2、表明已经做了哪些测试
- 3、目前y的进度是什么
这样他人帮助解决问题时，就不会走弯路
