前言
代码注释永远是开发人员心中的痛。
你明明知道写这能提高你工作效率,但是你也认为这是在浪费时间、用处不大。
还有一种言论:如果一段代码不写注释,就让人无法理解的话,请重写。
我认为绝大多数时候这是非常错误的。还记得我在学习代码的时候。一位讲师的话记忆犹新,告诉我们:
每行代码都应该有注释来解释它的作用。我们将根据此标准对你的课程作业打分。
所以我们当时的代码作业是这样的!
// 获取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
}
不难理解这段代码的作用。如果 maybeKey 不是 undefined ,我们将 key 属性设置为 maybeKey 的字符串化。
'' + maybeKey会将maybeKey转换为字符串。例如'' + 2返回"2"。
相信初级前端都能理解这段代码的含义。
React 团队对段代码的注释很棒。
基本上所有的教程都没有讲到这一段,这里我就翻译并补充一下,这段注释棒的地方是
它提出了问题,给出了两个例子并解释了长期计划和短期解决方案。
总结
所有的代码只要有足够的时间最终都可以被理解,任何开发人员都可以逐句浏览代码并弄清楚代码的作用。
但要弄清楚它为什么这样做却困难得多。
所以请您接下来编写为什么的注释,而不是是什么的注释
相信你的同事(或未来的您)如此编写的话,会因此变得更好。