如何写代码注释?你还在写浪费生命的注释吗?

186 阅读3分钟

前言

代码注释永远是开发人员心中的痛。

你明明知道写这能提高你工作效率,但是你也认为这是在浪费时间、用处不大。

还有一种言论:如果一段代码不写注释,就让人无法理解的话,请重写

我认为绝大多数时候这是非常错误的。还记得我在学习代码的时候。一位讲师的话记忆犹新,告诉我们:

每行代码都应该有注释来解释它的作用。我们将根据此标准对你的课程作业打分。

所以我们当时的代码作业是这样的

// 获取ENV 的值,将他赋值给 input的value
const inputValue = process.ENV.bar

// 将他乘以2
const newValue = inputValue * 2

// 将他传递给 square 函数
const finalValue = square(newValue)

// squares 函数接受一个数字,并返回一个新的数字
const square = (x) => x * x

那些说注释是在浪费时间的人想到的是这种注释风格,他们说的绝对正确的

像这样描述编程如何运行的注释绝对没有任何价值。上面的每条注释都无法让人理解接下来的代码要做的事情。

请对 为什么? 进行注释

上面注释的问题在于他们注释了代码怎么做的。这些注释很少有用;因为这些注释是在解释计算机执行一些事情的指令,而不是告诉开发人员这做了什么

大多数时候你会发现你不需要写很多注释,因为你不会觉得这些代码看不懂。

但是,您也会写出不好理解的代码。也许是正在解决的一个bug,或者是一个遗留的问题。

我曾经在工作中遇到一个问题,要前端查询数据,这个要它运行得非常快并且非常复杂——有许多边缘情况需要考虑。

我们付出了很多努力让代码看起来尽可能清晰,但最终它永远不会容易理解,有太多的代码有很多条件和逻辑,只有在我们的特定上下文中才能理解业务及其运作方式。

我想到一个例子,比如 React 代码库中这一段对 key 的解释,就非常好,这正是我们要学习的注释方法:

// Currently, key can be spread in as a prop. This causes a potential
// issue if key is also explicitly declared (ie. <div {...props} key="Hi" />
// or <div key="Hi" {...props} /> ). We want to deprecate key spread,
// but as an intermediary step, we will use jsxDEV for everything except
// <div {...props} key="Hi" />, because we aren't currently able to tell if
// key is explicitly declared to be undefined or not.
/*
 当前,key如果作为一个prop传进来,会导致了一个潜在的
 问题(例如:<div {...props} key="Hi" />或<div key="Hi" {...props} /> )。
 这里我们不想使用 props 里的key,
 但作为一个中间步骤,我们除了<div {...props} key="Hi" />不处理,其余的props 里的key都使用jsxDEV来处
 理,因为我们目前还不能确定key是否被明确声明为未定义。
*/

if (maybeKey !== undefined) {
  key = '' + maybeKey
}

这里是 GitHub 上的链接

不难理解这段代码的作用。如果 maybeKey 不是 undefined ,我们将 key 属性设置为 maybeKey 的字符串化。

'' + maybeKey 会将 maybeKey 转换为字符串。例如 '' + 2 返回 "2" 。

相信初级前端都能理解这段代码的含义。

React 团队对段代码的注释很棒。

基本上所有的教程都没有讲到这一段,这里我就翻译并补充一下,这段注释棒的地方是

它提出了问题,给出了两个例子并解释了长期计划和短期解决方案。

总结

所有的代码只要有足够的时间最终都可以被理解,任何开发人员都可以逐句浏览代码并弄清楚代码的作用。

但要弄清楚它为什么这样做却困难得多。

所以请您接下来编写为什么的注释,而不是是什么的注释

相信你的同事(或未来的您)如此编写的话,会因此变得更好。