共计 2040 个字符，预计需要花费 6 分钟才能阅读完成。
本文属于原创文章，转载请注明 – 来自桃源小盼的博客
前言
尽管这个系列是前端标准，然而我的了解稍稍不同。
- 代码格局：具体到换行，符号，空格等每一个细节
- 代码标准：肯定要这么做
- 最佳实际：最好要这么做
代码格局天然是让 prettier 来做。
这个系列是代码标准和一部分最容易施行的最佳实际的组合。
1. 优先应用 es6+ 新语法
- 解构赋值
- class 类
-
箭头函数
- 函数参数默认值
- 可选链 ?.
只列出了局部个性，es6+ 的语法，表白性更好，如果还没学会或者不习惯。
那就强制本人去学习和习惯，而后你就喜爱上了它。
2. 函数必须增加多行正文
例外情况：生命周期函数
/**
* 发动批量解决
*/
function launchBatch() {batching.value = true}其实最好的正文，就是依赖办法命名和办法参数命名来表白含意。
但事实是每个团队的状况都不同，国人英文素质广泛谈不上好，所以不能仅仅依附办法命名。
所以咱们在第一版的标准中规定，如果开发中集体认为这个函数名不容易了解，那么须要减少正文。如果函数参数值多样，也须要正文阐明。
然而实在的状况是，每个人感觉本人的函数命名易懂，所以简直没有正文。所以这一次才要求所有函数必须正文。
3. 函数长度个别管制在 20 行以内
为什么是 20 行？综合多种因素吧。集体的教训、易保护水平、模块化。
其实 20 行就是个风向标，如果真的就是 21 行，就说这段代码不好吗？
天然不是，这条标准是在揭示每一个开发者，超过 20 行的时候，从新扫视这段代码。
当然了，有的代码就算 10 行以内，也不是好代码。
4. 函数参数超过二个能够改为参数对象
const item = await getItemFromCollection(54391, 'shop')
// better
const item = await getItemFromCollection({
id: 54391,
collectionName: 'shop',
})
async function getItemFromCollection({id, collectionName}) {// do something}参数对象的形式，从调用者的角度，更容易了解参数的含意，相当于在调用这里，就帮忙咱们做了参数命名。否则咱们就要去函数定义的中央，查看相干的阐明。
5. 函数参数不要定义为 boolean 类型
6. 尽量不应用 switch case
7. 用卫语句替换嵌套的条件表达式
// bad
function getPayAmount() {
let result
if (isDead) {result = deadAmount()
} else {if (isSeparated) {result = separatedAmount()
} else {if (isRetired) {result = retiredAmount()
} else {result = normalPayAmount()
}
}
}
return result
}
// good
function getPayAmount() {if (isDead) {return deadAmount()
}
if (isSeparated) {return separatedAmount()
}
if (isRetired) {return retiredAmount()
}
return normalPayAmount()}8. 多字符串拼接应用模板字符串
// bad
const str = 'a' + 'b' + test
// good
const str = `ab${test}`9. 优先应用迭代器遍历
10. 循环嵌套三次的时候，复杂度为 O(n^3)，留神性能问题
如果想更好地解决这类问题，还是须要组内搭档都具备算法常识。
只不过现实情况通常不同，思考到很多人不足算法常识，所以有了这一条。
还是那句话，没有最好的标准，只有适宜与更好的标准。
11. 业务相干的数字，须要定义常量
// bad
if (type === 1) {// doSomething} else if (type === 2) {// doSomething}
// good
const MANAGER = 1
const GENERAL = 2
if (type === MANAGER) {// doSomething} else if (type === GENERAL) {// doSomething}12.this 转换命名 self
13. 工具函数优先应用 lodash
举荐应用 lodash-es 库，为了 webpack 的 tree shaking 优化体积。
14. 非凡业务逻辑要减少单行正文
非凡的业务，通常能记住的状况因人而异，有可能你始终记着这个非凡的业务逻辑，有可能你在一周后就遗记了。为了团队，也为了将来的本人，写好记录。
15. 尽早删除 TODO 正文
16. 过期代码及时删除
真想找回，能够查看 git 历史记录。
17. 尽早删除调试 console.log 语句
如果在代码里写了很多的调试语句，兴许是调试代码的形式不够好，试试 debugger 形式。
18. 非凡状况
- 在 for 循环中应用 i 是适合的
- 在变量替换中应用 temp 是适合的
参考资料
- 《重构》
- 《代码整洁之道》
- 《代码之丑》
