我喜欢写干净的代码, 也希望我的团队写出优良而干净的代码. 问题在于, 每个人对于 "干净的代码" 有不同的定义.
并不用什么神秘的祖传秘方, 这里列出了一些简单易行的小技巧, 就可以让我更少的写出 bug, 也让我更 happy.
"更好的代码" 指的是什么?
我乐于处理注重以下目标的代码:
可读性 : 代码应该易读易理解. why 和 how 都应该清楚的反映在代码中.
简单的 : 当不存在无法读懂的情况, 且难以被误用, 以及即便增添功能也难以破坏它的时候, 代码就是简单的.
一致的 : 一致的缩进, 一致的命名, 一致的文件结构. 不管采取什么样的风格, 范式和决策, 都要始终如一.
此外还有一些我较少关心的事情: 使代码通用, 强制使用设计模式, 遵循已知的 "正确方式", 以及不必要的性能优化
如何写出更好的代码?
以下是我现在如何写代码的方式, 以及为何要这样写的理由:
零注释策略
注释会变得陈旧并由此增加干扰你理解代码的风险. 并且, 注释会让你觉得可以对一些本不应该存在的含糊代码做一些补偿.
所以说与其写注释, 不如关注于代码的可读性.
- //
- if (x> 5) { /* 5 是一个需要 run away 的特殊临界点 */
- runAway()
- }
- //
- const runAwayThreshold = 5
- const shouldRunAway = (x> runAwayThreshold)
- if (shouldRunAway) {
- runAway()
- }
零 TODO 策略
不要把代码本身当成项目管理系统来用. JIRA,Trello,Asana 等更适合于将计划中的工作文档化. 如果诸如 "有时间的时候务必要将这里变得更快" 的注释是必要的, 那么就应该把它放在每个人都能看到的地方.
- //
- while (true) {} // TODO: 有时间的时候务必要将这里变得更快
- //
- while (true) {}
自文档化的代码
使用变量可以帮助代码变得自文档化(self-documenting). 可以用这些变量更好的解释我们的意图: 变量名表明了 why, 而对其赋的值则是 how.
- //
- if (x> 2 && x <5) {
- fireMissiles()
- }
- //
- const enemyInRange = (x> 2 && x <5)
- if (enemyInRange) {
- fireMissiles()
- }
尽早的退出
函数缩进的第一列是个 "好位置". 所以我总是尽早退出(return 或 break), 从而将更重要的代码片段尽可能的放在函数的 "根层次" 上.
作为通用的规则: 更少的缩进 更易读的代码.
- //
- const fetchData = (id) => {
- if (id) {
- fetch('/data/' + id)
- }
- }
- //
- const fetchData = (id) => {
- if (!id) {
- return
- }
- fetch('/data/' + id)
- }
不可变的
相比于可变的引用 (JS 中的 var 或 let), 我更喜欢 const 引用; 因为定义了一个常量之后, 就不需要再关注其(如何或什么时候被改变) 了. 不管是什么语言, 基本都有类似的特性支持常量.
- //
- let mul = x * y
- if (mul> 70) {
- mul = 70
- }
- //
- const mul = Math.min(x * y, 70)
另一个例子:
- //
- let x
- if (str === 'one') {
- x = 1
- } else if (str === 'two') {
- x = 2
- } else if (str === 'three') {
- x = 3
- }
- //
- const x = {
- one: 1,
- two: 2,
- three: 3
- }[str]
为每个想法单起一行
我们都需要专注, 来面对复杂的代码. 可以通过保持 "代码句子" 的简短, 来将复杂的代码变得简单.
- //
- people
- .filter(person => person.age> 10 && person.firstName.length> 2 && person.lastName.length> 4)
- // 逻辑更清晰
- people
- .filter(person => person.age> 10)
- .filter(person => person.firstName.length> 2)
- .filter(person => person.lastName.length> 4)
- // 逻辑清晰且性能更好
- people.filter(
- person => person.age> 10
- && person.firstName.length> 2
- && person.lastName.length> 4
- )
来源: https://juejin.im/post/5b174f99f265da6e2545b72f