「译」代码整洁之道的 7 个方法

原文地址:Clean up your code by applying these 7 rules ⚡️

原文作者:Joachim Zeelmaekers(已授权)

译者 & 校正:HelloGitHub-小鱼干 & HelloGitHub-鸭鸭

可读的代码是可维护的

在这篇短文中,我将介绍一些你可以用来改进你的代码的方法。本文代码示例均使用 JavaScript。

我发现但凡是可读的代码必定是可维护的。

作为一名开发人员,我的目标是编写高质量的代码。团队中的每个开发人员,不管他/她的技术水平如何,都必须能够通过阅读理解我所写的代码。代码的可读性有助于年轻的开发人员编写代码时更加自信。

删除 不必要的 代码注释

当然,有些代码可以非常复杂。我深知这一点且见过很多次。在复杂的代码中,我会写些适当的文档和代码注释。

别误会。我不是代码注释或 JavaScript JSdoc 的爱好者,而且基本上我能不用它们便不用。

我不需要任何注释来解释这个接收 X 个数组并将它们合并到一个新的数组中的函数。

function mergeArrays(...arrays) {
  let mergedArray = []

  arrays.forEach(array => {
      mergedArray = [...mergedArray, ...array]
  })

  return mergedArray
}

像示例代码,如果增添文档并不能提高可读性。我希望团队成员知道展开操作符是什么。如果他们不清楚,他们应该在代码审查 code review 时来问我。

当然,我们不要忘记注释的代码块。如果我们忘记了,这里只有一个解决方案:删除代码。既然了不起的 git 可以检出旧代码,那么为什么还要把它留在注释中呢?

请停止把你的代码库变成垃圾场。

重视命名

如果你看到函数名 mergeArrays,就应该很清楚地知道这是一个将 X 个数组组合成一个新的数组的函数。

我知道命名是件难事。函数越复杂,命名就越难… 我有个法子让命名更容易,举个例子:有一个函数,它会合并两个数组并生成一个新的唯一的数字列表。你会怎么命名?是下面这样吗?

function mergeNumberListIntoUniqueList(listOne, listTwo) {
  return [...new Set([...listOne, ...listTwo])]
}

mergeNumberListIntoUniqueList 这个名字并没有那么糟糕,至少功能如其名。命名的难点在于这个函数要做两件事:一个函数做的事情越多,命名它就越困难。将这个函数拆分为两个单独的函数,命名会更容易且函数复用更容易。

function mergeLists(listOne, listTwo) {
  return [...listOne, ...listTwo]
}

function createUniqueList(list) {
  return [...new Set(list)]
}

当然,不需要调用新函数就可以很容易地创建美观的一行代码。但有时,一行代码的可读性并不高。

If 语句

我对这个问题的命名无力… 看!命名不易…

但我经常看到这种情况。

问题

if(value === 'duck' || value === 'dog' || value === 'cat') {
  // ...
}

解决方法

const options = ['duck', 'dog', 'cat'];
if (options.includes(value)) {
  // ...
}

这样做,你创建了一段像是英语句子般的可读代码。

如果选项包含值,那么 ...

提前退出机制

这个准则有很多种命名方式,但我选择了 “提前退出 Early exit” 这个名字。

让我给你们看一段代码。我相信你们以前见过这样的东西。

function handleEvent(event) {
  if (event) {
    const target = event.target;
    if (target) {
      // Your awesome piece of code that uses target
    }
  }
}

来我们检查下对象 event 是否为真,以及属性 target 是否可用。问题是上面代码我们已经用了两个 if 语句。

让我们看看如何在这里实现 “提前退出”。

function handleEvent(event) {
  if (!event || !event.target) {
    return;
  }
  // Your awesome piece of code that uses target
}

在这里用 “提前退出”,你可以检查是否 event 和  event.target 同时非假 。很明显,我们确信这一事件 event.target 非假。因为如果这个语句为假,程序就不会执行其他代码。

解构赋值

在 JavaScript 中,我们可以解构数据和对象。

根据 developer.mozilla.org 上的文档,解构赋值语法是一种 JavaScript 表达式。通过解构赋值,可以将值从数组、属性从对象中取出,赋值给其他变量

一些代码示例

// Destructuring an object
const numbers = {one: 1, two: 2};
const {one, two} = numbers;
console.log(one); // 1
console.log(two); // 2

// Destructuring an array
const numbers = [1, 2, 3, 4, 5];
const [one, two] = numbers;
console.log(one); // 1
console.log(two); // 2

解构的问题在于,它有时会为属性创建一个不好的命名。最好的例子是从 API 获取数据并接收具有 data 属性的响应对象。

const url = "http://localhost:8080/api/v1/organizers/1"
const response = await axios.get(url)
const {name} = response.data

这个代码示例说明你正在获取 id 为 1 的 organizer。organizer 对象有一个名字,你可以解构它。这样做没什么问题。

这段代码可以正常运行。但是为什么属性名还是 name? 那将是整个范围中唯一的 name 属性吗?属性名又来自哪个对象?

通过重命名属性可避免这些问题。

const url = "http://localhost:8080/api/v1/organizers/1"
const response = await axios.get(url)
const {name: organizerName} = response.data

这段代码变得更具可读性。每个人都知道变量是 organizer 的名字。

童子军规则

听过这样一句话吗:“永远保持离开时的露营地比你发现它时更整洁”?

这就是童子军的规则。让代码比发现时更好。你发现代码异味 code smell?重构它!你发现一个未使用的变量?删除它!

我喜欢把童子军规则和打扫房间的情况进行类比。想象一下,你家里的每个人都把盘子放在水槽上,把所有垃圾都放在走廊上,把所有要洗的衣服都放在浴室里。但是每个星期天,你必须花费 4 个多小时清理整个房子。你会钟意吗?

我肯定答案是 NO。所以如果每个人都立即清理房间的小部分,星期天的工作量会小一些。

代码库同理。如果每个小的代码异味 code smell 都留在代码库中,没有人删除未使用的变量,linter 就会抓狂且有大约 77 个 warning。而且代码库将会有很多清洁工作要做,但是如果每个人都承担起自己的责任并遵守童子军法则,很多问题将会得到解决。

代码风格

同样重要的还有确定团队中的代码风格。

我不 care 你是喜欢单引号还是双引号,空格还是 tab,结尾逗号还是不用。选择一种风格并坚持下去。你可以用 Linter 或者 Prettier 来做这件事。

有很多工具可以用来解决代码风格问题。我最钟意的是使用 Husky 预提交钩子。Prettier 的文档中也有一个关于预提交钩子的页面。

这个预提交钩子总是在每次提交之前运行配置好的命令。如果你正确地配置它,它会运行得更漂亮,并对所有文件应用所有规则。这确保了团队总是拥有统一的代码风格,而没有任何糟糕的代码。

小结

我知道有些方法显而易见,有些则不是。但作为一名全职开发人员,我在不同的代码库上工作。这些规则的重要性只有在较大的代码库中才会突显。但这并不意味着你不应该将这些方法用在小项目中,提高你的代码质量让小项目更高效。它让团队成员方便地阅读你的代码并合并你的 pull 请求。正如我所说的,可读的代码更容易维护,当然可读的代码还有其他更多的好处。

如果你想了解更多关于代码整洁之道的知识,可以尝试阅读罗伯特・马丁的《代码整洁之道》。

欢迎优秀的你加入 HelloGitHub 的「译文亦舞」系列,让你的才华舞动起来!把优秀的文章分享给更多的人。要求:

  • 平时浏览 GitHub、开源、编程、程序员等英文资讯和文章

  • 想把自己阅读到优秀的英文文章分享给更多的人

  • 翻译准确但不是直翻或机翻

  • 保证每月至少翻译或校正 1 篇高质量文章

  • 了解 Markdown 和排版规则

  • 联系微信:xueweihan (备注:翻译)


封面图来自 Unsplash 由 Kevin Ku 拍摄

最后,感谢原文作者的翻译授权


关注公众号第一时间收到更新

削微寒 CSDN认证博客专家 萌新
微信搜【HelloGitHub】关注公众号后可以找到我。分享 GitHub 上有趣、入门级的开源项目,每月 28 号更新,已持续维护 4 年有余。
已标记关键词 清除标记
相关推荐
<p> <span style="color:#4d4d4d;">当前课程中博客项目的实战源码是我在 GitHub上开源项目 My-Blog,目前已有 2000 多个 star:</span> </p> <p> <span style="color:#4d4d4d;"><img src="https://img-bss.csdnimg.cn/202103310649344285.png" alt="" /><br /> </span> </p> <p> <span style="color:#4d4d4d;">本课程是一个 Spring Boot 技术栈的实战类课程,课程共分为 3 大部分,前面两个部分为基础环境准备和相关概念介绍,第三个部分是 Spring Boot 个人博客项目功能的讲解,<span style="color:#565656;">通过本课程的学习,不仅仅让你掌握基本的 Spring Boot 开发能力以及 Spring Boot 项目的大部分开发使用场景,同时帮你提前甄别和处理掉将要遇到的技术难点,认真学完这个课程后,你将会对 Spring Boot 有更加深入而全面的了解,同时你也会得到一个大家都在使用的博客系统源码,你可以根据自己的需求和想法进行改造,也可以直接使用它来作为自己的个人网站,这个课程一定会给你带来巨大的收获。</span></span> </p> <p> <span style="color:#4d4d4d;"><span style="color:#565656;"> </span></span> </p> <p> <span style="color:#e53333;"><span style="color:#e53333;"><strong>课程特色</strong></span></span> </p> <p> <span style="color:#e53333;"><span style="color:#e53333;"><strong> </strong></span></span> </p> <p> <span style="color:#4d4d4d;"><span style="color:#565656;"> </span></span> </p> <ol> <li> <span style="color:#565656;">课程内容紧贴 Spring Boot 技术栈,涵盖大部分 Spring Boot 使用场景。</span> </li> <li> <span style="color:#565656;">开发教程详细完整、文档资源齐全、实验过程循序渐进简单明了。</span> </li> <li> <span style="color:#565656;">实践项目页面美观且实用,交互效果完美。</span> </li> <li> <span style="color:#565656;">包含从零搭建项目、以及完整的后台管理系统和博客展示系统两个系统的功能开发流程。</span> </li> <li> <span style="color:#565656;">技术栈新颖且知识点丰富,学习后可以提升大家对于知识的理解和掌握,对于提升你的市场竞争力有一定的帮助。</span> </li> </ol> <p> <strong>实战项目预览</strong> </p> <p> <span style="color:#4d4d4d;"><span style="color:#565656;"><span style="color:#e53333;"><strong> </strong></span></span></span> </p> <p> <span style="color:#4d4d4d;"><img src="https://img-bss.csdn.net/202005150303066258.png" alt="" /><br /> </span> </p> <p>   </p> <p> <span style="color:#4d4d4d;"> </span> </p> <p> <span style="color:#4d4d4d;"><img src="https://img-bss.csdn.net/202005150305396930.png" alt="" /><br /> </span> </p> <p> <span style="color:#4d4d4d;"> </span> </p> <p> <span style="color:#4d4d4d;"><img src="https://img-bss.csdn.net/202005150305528842.png" alt="" /><br /> </span> </p> <p> <span style="color:#4d4d4d;"> </span> </p> <p> <span style="color:#4d4d4d;"><img src="https://img-bss.csdn.net/202005150306056323.png" alt="" /><br /> </span> </p>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页