乐趣区

关于javascript:前端规范与思考三-JavaScript规范

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

前言

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

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

代码格局天然是让 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 是适合的

参考资料

  • 《重构》
  • 《代码整洁之道》
  • 《代码之丑》
退出移动版