保持代码工整的 7 个小技巧
头图 | CSDN 下载自视觉中国
编译 | HelloGitHub 责编 | 张文
来源 | HelloGitHub(ID:GitHub520)
原文地址: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 objectconst numbers = {one: 1, two: 2};const {one, two} = numbers;console.log(one); // 1console.log(two); // 2
// Destructuring an arrayconst numbers = [1, 2, 3, 4, 5];const [one, two] = numbers;console.log(one); // 1console.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 请求。正如我所说的,可读的代码更容易维护,当然可读的代码还有其他更多的好处。
如果你想了解更多关于代码整洁之道的知识,可以尝试阅读罗伯特・马丁的《代码整洁之道》。
更多精彩推荐
☞程序员有钱了都干什么?买豪宅,玩跑车,上太空!| 涛滔不绝
☞分库分表:TiDB,求别抢饭碗!☞从 JDBC 到 Mybatis,看这篇就够了☞他被称为印度“ IT 大王”,富可敌国,却精打细算如守财奴☞带你「周游世界」的 MODNet 算法☞一文聊“图”,从图数据库到知识图谱☞红帽"干掉" CentOS 8,CentOS Stream 上位
☞科技垄断正在朝着纵向发展☞挑战TensorFlow、PyTorch,谁才是中国AI开源框架之星
☞CPU:网卡老哥,你到底怎么工作的?☞GitHub标星7000+,快速恢复像素化图像,效果惊人
点分享点点赞点在看
保持代码工整的 7 个小技巧相关推荐
- pythonencoding etf-8_etf iopv python 代码30个Python常用小技巧
1.原地交换两个数字x, y =10, 20 print(x, y) y, x = x, y print(x, y) 10 20 20 10 2.链状比较操作符n = 10 print(1 print ...
- 一些我们码代码过程中有用的小技巧
四舍五入 很多语言都提供了取整的方法,但其只能取到数的整数部分,而当我们需要进行四舍五入的时候就不行了,这里介绍一种简单实用的方式. Step1.原数加上0.5 Step.进行取整运算 这样我们就得到 ...
- HTML首字下沉的编码,CSS_有关首行首字下沉的实现原理及代码,下面是两个个小技巧,一个是 - phpStudy...
有关首行首字下沉的实现原理及代码 下面是两个个小技巧,一个是很多报刊中的首字下沉,其实很简单,原理就是在样式中添加后缀即可.还有一个是对第一行文字进行单独样式.给这段标签添加后缀即可.这两个小技巧分别 ...
- idea(水槽)代码左边栏显示代码行数、方法运行图标、折叠代码块,代码块缩进提示线,idea小技巧
找了很久才发现的.没问别摸索出来的,搜索不到帖子就自己写一个了. 单独方法块运行挺好用的. 1:代码块折叠:Idea小技巧 之 折叠代码块_我是一个小石头的博客-CSDN博客 2:代码行数显示: 显示 ...
- SourceInsight快速看代码的小技巧
概述: 嵌入式开发过程,简单易用的代码查看编辑器应该要数SourceInsight使用率最高了吧,这次主要是说说在阅读代码过程中,使用SourceInsight的几个功能,让阅读代码更快捷 ...
- 程序员的反击!每天一个离职小技巧
作者 | 梦想橡皮擦 来源 | 非本科程序员(ID:htmlhttp) 写在前面 俗话说的好,代码写的少,离职少不了. 最近畅游互联网,发现一些离职小技巧,读后,内心被深深的打动了,但是细细的品过之后 ...
- 程序员“离职小技巧”
作者 | 梦想橡皮擦 责编 | 张文 来源 | 转载自 CSDN 博客 俗话说的好,代码写的少,离职少不了. 最近畅游互联网,发现一些离职小技巧,读后,内心被深深的打动了 但是细细的品过之后,发现对 ...
- Python3,掌握这20个小技巧,小菜鸡瞬间变成老码农~
20个编码小技巧 1.引言 2.常用工具 2.1 csv文件读写 2.2 计数器 2.3 Dict 2.3.1 带默认值的 Dict 2.3.2 有序的 Dict 2.4 迭代器工具 3.易混淆操作 ...
- 你不知道的十个 JS 小技巧
总结了一些开发常用的 JS 小技巧,让你的代码更优雅! 1. 使用 const 定义 在开发中不要过度声明变量,尽量使用表达式和链式调用形式.然后一般能用 const 就不要用 let .这种模式写多 ...
最新文章
- 基础面试题 — 数据结构与算法
- ifrmae内层和外层高度同步
- git 下载 github 上的代码
- html解析器编译原理,编译原理实验报告词法分析器(内含源代码).docx
- Expression Designer系列工具汇总 [转载]
- 巴菲特发布2022年致股东公开信:盛赞苹果CEO
- iOS 13发布日期确定 苹果WWDC2019定档!
- OpenCV---ROI(region of interest)和泛洪填充
- Python 中的 None 与真假
- 高斯消元解同余方程组
- Tomcat修改端口号(7.0 version)
- kali之iwconfig
- android view 3d,Android 使用ViewPager打造3D画廊效果
- python 占用内存过高_PyCharm如何优化?太占内存了,太慢了
- 零数科技获评《互联网周刊》2021元宇宙潜力企业TOP50
- Excel表格自动汇总,sheet搬迁,数据汇总,多个工作簿、多个sheet页内数据汇总
- 四、青龙面板 Nvjdc(诺兰)安装教程
- c语言 寻找相同的数字,用c语言编写寻找既是完全平方数,又有两位数字相同的三位正整数,例如121,144等。...
- 路由器/交换机flow 调试指令
- windows系统目录programdata和program file(x86)
热门文章
- Flex导出Excel
- c++ 函数参数问题
- bzoj1597 [Usaco2008 Mar]土地购买
- yum 配置详解(转发)
- [转]STL的内存分配器
- python的gzip库使用方法
- VS开发工具常用插件
- [论文翻译] Active Learning by Feature Mixing
- [论文阅读] TransUNet: Transformers Make Strong Encoders for Medical Image Segmentation
- Visual Studio Code (vscode) 配置 C / C++ 环境