[译] 不用祖传秘方 - 写好代码的几个小技巧

2,009 阅读3分钟

原文:【The Non-Secret Formula for Writing Better Code】 https://hackernoon.com/the-non-secret-formula-for-writing-better-code-e41d1ff38682

免责声明: 尽管文中的观点应该是没什么疑问的正确选择,但都是个人观点。

我喜欢写干净的代码,也希望我的团队写出优良而干净的代码。问题在于,每个人对于 “干净的代码” 有不同的定义。

并不用什么神秘的祖传秘方,这里列出了一些简单易行的小技巧,就可以让我更少的写出 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
)

(end)


----------------------------------------

长按二维码或搜索 fewelife 关注我们哦