本文属于原创文章，转载请注明--来自桃源小盼的博客

前言

尽管这个系列是前端标准，然而我的了解稍稍不同。

  • 代码格局：具体到换行，符号，空格等每一个细节
  • 代码标准：肯定要这么做
  • 最佳实际：最好要这么做

代码格局天然是让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')// betterconst item = await getItemFromCollection({  id: 54391,  collectionName: 'shop',})async function getItemFromCollection({ id, collectionName }) {  // do something}

参数对象的形式，从调用者的角度，更容易了解参数的含意，相当于在调用这里，就帮忙咱们做了参数命名。否则咱们就要去函数定义的中央，查看相干的阐明。

5.函数参数不要定义为boolean类型

6.尽量不应用switch case

7.用卫语句替换嵌套的条件表达式

// badfunction getPayAmount() {  let result  if (isDead) {    result = deadAmount()  } else {    if (isSeparated) {      result = separatedAmount()    } else {      if (isRetired) {        result = retiredAmount()      } else {        result = normalPayAmount()      }    }  }  return result}// goodfunction getPayAmount() {  if (isDead) {    return deadAmount()  }  if (isSeparated) {    return separatedAmount()  }  if (isRetired) {    return retiredAmount()  }  return normalPayAmount()}

8.多字符串拼接应用模板字符串

// badconst str = 'a' + 'b' + test// goodconst str = `ab${test}`

9.优先应用迭代器遍历

10.循环嵌套三次的时候，复杂度为O(n^3)，留神性能问题

如果想更好地解决这类问题，还是须要组内搭档都具备算法常识。

只不过现实情况通常不同，思考到很多人不足算法常识，所以有了这一条。

还是那句话，没有最好的标准，只有适宜与更好的标准。

11.业务相干的数字，须要定义常量

// badif (type === 1) {    // doSomething} else if (type === 2 ) {    // doSomething}// goodconst MANAGER = 1const GENERAL = 2if (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是适合的

参考资料

  • 《重构》
  • 《代码整洁之道》
  • 《代码之丑》