当前位置: 首页 > 科技观察

清理代码的7种方法

时间:2023-03-17 22:43:54 科技观察

可读代码是可维护的在这篇简短的文章中,我将介绍一些可以用来改进代码的方法。本文中的代码示例使用JavaScript。我发现任何可读的代码都必须是可维护的。作为一名开发人员,我的目标是编写高质量的代码。团队中的每个开发人员,无论他/她的技能水平如何,都必须能够阅读和理解我编写的代码。代码可读性有助于年轻开发人员在编写代码时更有信心。删除不必要的代码注释当然,有些代码可能非常复杂。我很了解这一点,也见过很多次。在复杂的代码中,我编写了适当的文档和代码注释。不要误解。我不喜欢代码注释或JavaScriptJSdoc,基本上我可以没有它们。我不需要任何评论来解释这个接受X个数组并将它们合并到一个新数组中的函数。functionmergeArrays(...arrays){letmergedArray=[]arrays.forEach(array=>{mergedArray=[...mergedArray,...array]})returnmergedArray}像示例代码一样,如果添加文档不会提高可读性。我想让团队成员知道传播运算符是什么。如果他们不清楚,他们应该在代码审查时来问我。当然,我们不要忘记带注释的代码块。如果我们忘记了,这里只有一个解决方案:删除代码。当很棒的git可以检查旧代码时,为什么还要在注释中留下旧代码?请停止将您的代码库变成转储。注意命名如果看到函数名mergeArrays,就应该清楚这是一个将X个数组组合成一个新数组的函数。我知道命名事物很难。函数越复杂,命名就越难……我有一种方法可以使命名更容易,例如:有一个函数合并两个数组并生成一个新的唯一数字列表。你会给它起什么名字?是这样的吗?functionmergeNumberListIntoUniqueList(listOne,listTwo){return[...newSet([...listOne,...listTwo])]}mergeNumberListIntoUniqueList这个名字还不错,至少它是按照它说的做的。命名的困难在于这个函数做了两件事:一个函数做的事情越多,它就越难命名。将此函数拆分为两个单独的函数可以使命名更容易,函数重用也更容易。functionmergeLists(listOne,listTwo){return[...listOne,...listTwo]}functioncreateUniqueList(list){return[...newSet(list)]}当然,创建漂亮的代码行很容易。但是有时候,一行代码可读性不是很好。如果声明我对问题的命名无能为力……看!命名并不容易......但我看到这种情况经常发生。问题if(value==='duck'||value==='dog'||value==='cat'){//...}解constraints=['duck','dog','cat'];if(options.includes(value)){//...}通过这样做,您创建了一段看起来像英语句子的可读代码。如果选项包含一个值,那么......提前退出机制的标准可以有多种命名方式,但我选择了“提前退出”这个名称。让我给你看一段代码。我相信你以前见过这样的事情。functionhandleEvent(event){if(event){consttarget=event.target;if(target){//Yourawesomepieceofcodethatusetarget}}}让我们检查对象事件是否为真以及属性目标是否可用。问题是我们在上面的代码中使用了两个if语句。让我们看看这里如何实现“提前退出”。functionhandleEvent(event){if(!event||!event.target){return;}//Yourawesomepieceofcodethatusetarget}这里使用了提前退出,可以检查event和event.target是否都为非false。显然,我们确定事件event.target不是假的。因为如果这条语句为假,程序将不会执行其他代码。解构赋值在JavaScript中,我们可以解构数据和对象。根据developer.mozilla.org上的文档,解构赋值语法是一个JavaScript表达式。通过解构赋值,可以从数组中取值,从对象中取属性,赋值给其他变量。一些代码示例//Destructuringanobjectconstnumbers={one:1,two:2};const{one,two}=numbers;console.log(one);//1console.log(two);//2//Destructuringanarrayconstnumbers=[1,2,3,4,5];const[one,two]=numbers;console.log(one);//1console.log(two);//2解构的问题在于它有时会创建一个坏的命名。最好的例子是从API获取数据并接收具有数据属性的响应对象。consturl="http://localhost:8080/api/v1/organizers/1"constresponse=awaitaxios.get(url)const{name}=response.data此代码示例显示您正在获取ID为1的组织者。管理器对象有一个名称,您可以对其进行解构。这样做没有错。此代码工作正常。但是为什么属性名还是name呢?那会是整个范围内唯一的名称属性吗?属性名称又来自哪个对象?这些问题可以通过重命名属性来避免。consturl="http://localhost:8080/api/v1/organizers/1"constresponse=awaitaxios.get(url)const{name:organizerName}=response.data这段代码变得更加可读。每个人都知道变量是组织者的名字。童子军规则是否听过这样的说法:“离开营地时总是比刚到时更干净”?这是童子军的规矩。使您的代码比您找到它时更好。你注意到代码味道了吗?重构它!你有没有发现一个未使用的变量?删除它!我喜欢将童子军规则与房屋清洁情况进行类比。想象一下,你家里的每个人都把盘子放在水槽上,把所有的垃圾都放在走廊上,把所有的衣服都放在浴室里。但是每个星期天,你都要花4个多小时打扫全屋。你喜欢吗?我确定答案是否定的。因此,如果每个人同时清理房间的一小部分,周日的工作量就会减少。代码库是相同的。如果每个小代码味道都留在代码库中,并且没有人删除未使用的变量,则linter会崩溃并发出大约77条警告。而且代码库会有很多清理工作要做,但是如果每个人都负起责任,遵守童子军法则,很多问题都会迎刃而解。编码风格同样重要的是确定团队中的编码风格。我不在乎您喜欢单引号还是双引号、空格还是制表符、尾随逗号还是没有。选择一种风格并坚持下去。您可以使用Linter或Prettier来做到这一点。有许多工具可用于解决编码风格问题。我最喜欢的是使用Husky预提交挂钩。Prettier的文档也有一个关于预提交挂钩的页面。这个预提交挂钩总是在每次提交之前运行配置的命令。如果您正确配置它,它将运行得非常漂亮,并将所有规则应用于所有文件。这样可以保证团队始终有统一的代码风格,没有任何不好的代码。总结我知道有些方法是显而易见的,有些则不是。但作为一名全职开发人员,我在不同的代码库上工作。这些规则的重要性只有在较大的代码库中才会变得明显。但这并不意味着你不应该在小项目中使用这些方法,提高你的代码质量,让小项目更有效率。它使团队成员可以轻松阅读您的代码并合并您的拉取请求。正如我所说,可读代码更易于维护,当然可读代码还有其他好处。如果您想了解有关干净代码的更多信息,请尝试阅读RobertMartin的《代码整洁之道》。原文地址:Cleanupyourcodebyapplyingthese7rules:zap:?原作者:JoachimZeelmaekers(授权)译者&校对:HelloGitHub-小鱼干&HelloGitHub-鸭鸭