在提交代码时有哪些注意事项1:https://developer.aliyun.com/article/1505977
4. 适当使用数据结构
数据结构是组织数据以便可以有效使用数据的方法。有许多不同类型的数据结构,但最常见的是数组和对象。
数组是数据列表。它们可用于存储任何类型的数据,但数组中的每个项目必须具有相同的类型。数组使用方括号声明:
<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript"> const arr <span style="color:#89ddff">=</span> <span style="color:#c792ea">[</span><span style="color:#c3e88d">'a'</span><span style="color:#c792ea">,</span> <span style="color:#c3e88d">'b'</span><span style="color:#c792ea">,</span> <span style="color:#c3e88d">'c'</span><span style="color:#c792ea">]</span><span style="color:#c792ea">;</span> </code></span></span>
对象是使用键值对组织的数据集合。键用于访问值,这些值可以是任何类型的数据。对象使用大括号声明:
<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript"> const obj <span style="color:#89ddff">=</span> <span style="color:#c792ea">{</span> key1<span style="color:#89ddff">:</span> <span style="color:#c3e88d">'value1'</span><span style="color:#c792ea">,</span> key2<span style="color:#89ddff">:</span> <span style="color:#c3e88d">'value2'</span><span style="color:#c792ea">,</span> key3<span style="color:#89ddff">:</span> <span style="color:#c3e88d">'value3'</span><span style="color:#c792ea">,</span> <span style="color:#c792ea">}</span><span style="color:#c792ea">;</span> </code></span></span>
应适当使用数据结构,以使代码更具可读性和效率。例如,如果您有一个需要在页面上显示的数据列表,则使用数组比使用对象更合适。这是因为迭代数组并创建显示数据所需的元素会更容易。
另一方面,如果您有需要在页面上显示的数据集合,但每条数据也有一些关联的元数据,则使用对象比使用数组更合适。这是因为使用密钥访问数据和元数据会更容易。
5. 自由地注释你的代码
注释是未执行的代码行,但可供开发人员为自己或他人留下注释。在 JavaScript 中,注释表示为 // 表示单行注释,/* */ 表示多行注释:
<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript"><span style="color:#697098">// this is a single-line comment</span> <span style="color:#697098">/* this is a multi-line comment */</span></code></span></span>
注释是提高代码可读性的好方法。使用注释来解释您的代码正在做什么以及为什么要这样做。
注释很重要,主要有两个原因:它们可以帮助您记住代码正在做什么,以及它们可以帮助其他人理解您的代码。养成在编写代码时注释代码的习惯很重要。这将帮助您跟踪您的想法,并使其他人更容易理解您的代码。
一个常见的约定是使用 TODO 注释为自己留下关于需要做的事情的笔记:
<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript"><span style="color:#697098">// TODO: Implement login functionality</span></code></span></span>
另一个常见的约定是使用 FIXME 注释为自己留下有关需要修复的事项的注释:
<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript"><span style="color:#697098">// FIXME: This code is not working properly</span></code></span></span>
这是跟踪需要做什么的有用方法,它也使其他人很容易看到需要做什么。
一般来说,当你不确定某事应该做什么,或者你认为可能有更好的方法来做某事时,留下评论是个好主意。注释也通常用于解释复杂或不明显的代码。
请务必记住,注释应该用于提高代码的可读性,而不是使其更难理解。如果您发现自己编写的注释比它正在注释的代码长,则表明您的代码不可读,应该重构。
注释代码的提示
- 使用注释来解释您的代码正在做什么以及为什么要这样做。
- 使用评论为自己留下关于需要完成或修复的事情的笔记。
- 使用注释来解释复杂或不明显的代码。
- 使用注释来增强可读性代码,而不是作为拐杖。
- 在编写代码时注释代码。不要等到以后。
- 不要过度注释您的代码。只评论需要解释的部分。
- 在评论中使用清晰简洁的语言。
- 避免使用首字母缩略词或行话。
- 使用代码使注释保持最新。如果您更改代码,请更改注释。
- 删除过时的注释。
4. 缩进代码以提高可读性
缩进代码使其更易于阅读,还可以帮助您发现错误。正确缩进代码后,可以更轻松地查看代码的结构以及每个部分的开始和结束位置。这是调试代码和查找错误的有用方法。
在 JavaScript 中,标准缩进是两个空格。在 Python 中,标准缩进是四个空格。在像 Python 这样缩进很重要的语言中,使用错误的缩进可能会导致代码中断。
但即使在像 JavaScript 这样的语言中,缩进纯粹是一个表示问题,与缩进保持一致也很重要。不一致的缩进会使代码更难阅读和理解。
缩进代码的主要原因是提高可读性。但缩进代码也可以帮助您查找错误。如果代码正确缩进,则更容易看到某些内容何时不合适。
例如,查看以下代码示例:
<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript"><span style="color:#697098">// Unindented code</span> function <span style="color:#82aaff">printHello</span><span style="color:#c792ea">(</span><span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span> <span style="color:#ffcb6b">console</span><span style="color:#c792ea">.</span><span style="color:#82aaff">log</span><span style="color:#c792ea">(</span><span style="color:#c3e88d">"Hello, world!"</span><span style="color:#c792ea">)</span><span style="color:#c792ea">;</span> <span style="color:#c792ea">}</span> <span style="color:#82aaff">printHello</span><span style="color:#c792ea">(</span><span style="color:#c792ea">)</span><span style="color:#c792ea">;</span> <span style="color:#697098">// Indented code</span> function <span style="color:#82aaff">printHello</span><span style="color:#c792ea">(</span><span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span> <span style="color:#ffcb6b">console</span><span style="color:#c792ea">.</span><span style="color:#82aaff">log</span><span style="color:#c792ea">(</span><span style="color:#c3e88d">"Hello, world!"</span><span style="color:#c792ea">)</span><span style="color:#c792ea">;</span> <span style="color:#c792ea">}</span> <span style="color:#82aaff">printHello</span><span style="color:#c792ea">(</span><span style="color:#c792ea">)</span><span style="color:#c792ea">;</span></code></span></span>
在未缩进的代码中,很难看到语句位于函数内部。但在缩进代码中,很明显该语句位于函数内部。这样可以更轻松地发现错误,例如忘记添加大括号。console.log()
printHello()
console.log()
printHello()
缩进代码是一个样式问题,但与缩进保持一致很重要。大多数编程语言都有关于代码应如何缩进的约定,因此最好遵循这些约定。
通常,每当启动新块时,都应缩进代码。块是一起执行的代码段。例如,块可以是函数、if 语句或 for 循环。
6. 使用空格提高可读性
除了缩进代码之外,还可以使用空格来提高其可读性。通过在代码行之间添加额外的间距,可以使代码更易于扫描和理解。这在查看大型代码块时特别有用。
空间本身可以更轻松地跟踪您的阅读位置,就像自然语言的段落一样。但是,当空格将相关的代码行组合在一起时,它最擅长使代码更易于阅读。
通常的做法是在函数的末尾和下一个函数的开头之间放置一个空行。
<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript">function <span style="color:#82aaff">printHello</span><span style="color:#c792ea">(</span><span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span> <span style="color:#ffcb6b">console</span><span style="color:#c792ea">.</span><span style="color:#82aaff">log</span><span style="color:#c792ea">(</span><span style="color:#c3e88d">"Hello, world!"</span><span style="color:#c792ea">)</span><span style="color:#c792ea">;</span> <span style="color:#c792ea">}</span> function <span style="color:#82aaff">printWelcome</span><span style="color:#c792ea">(</span>name<span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span> <span style="color:#ffcb6b">console</span><span style="color:#c792ea">.</span><span style="color:#82aaff">log</span><span style="color:#c792ea">(</span><span style="color:#c3e88d">"Hello, "</span> <span style="color:#89ddff">+</span> name<span style="color:#c792ea">)</span><span style="color:#c792ea">;</span> <span style="color:#c792ea">}</span></code></span></span>
可以在条件语句的子句之间添加一个空行。
<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript">function <span style="color:#82aaff">printWelcome</span><span style="color:#c792ea">(</span>name<span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span> if <span style="color:#c792ea">(</span>name <span style="color:#89ddff">===</span> <span style="color:#c3e88d">"John"</span><span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span> <span style="color:#82aaff">print</span><span style="color:#c792ea">(</span><span style="color:#c3e88d">"Welcome, John!"</span><span style="color:#c792ea">)</span><span style="color:#c792ea">;</span> <span style="color:#c792ea">}</span> else <span style="color:#c792ea">{</span> <span style="color:#82aaff">print</span><span style="color:#c792ea">(</span><span style="color:#c3e88d">"Welcome, stranger!"</span><span style="color:#c792ea">)</span><span style="color:#c792ea">;</span> <span style="color:#c792ea">}</span></code></span></span>
还可以在声明变量的代码行和使用变量的代码行之间添加一个空行。
<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript"><span style="color:#89ddff"><</span><span style="color:#89ddff">?</span>php $name <span style="color:#89ddff">=</span> <span style="color:#c3e88d">"John"</span><span style="color:#c792ea">;</span> $<span style="color:#bfc7d5">location</span> <span style="color:#89ddff">=</span> <span style="color:#c3e88d">"Sydney"</span><span style="color:#c792ea">;</span> echo <span style="color:#c3e88d">"Welcome to $location, $name!"</span><span style="color:#c792ea">;</span> <span style="color:#89ddff">?</span><span style="color:#89ddff">></span></code></span></span>
空格和缩进都有其自身的好处,但它们协同工作以创建阐明执行流的视觉层次结构。当您结合使用空格对相关行进行分组和缩进以指示范围时,您的代码及其可读性将受益最大。
7. 使用数组和循环提高效率
数组和循环是基础但功能强大的工具,可以帮助您编写更好的代码。如果你已经开始学习编码,你可能已经知道它们了。
通过使用数组,您可以以有组织的方式存储数据。这可以使您的代码更高效、更易于阅读。另一方面,循环可以帮助您自动执行重复性任务。
一旦您知道如何正确使用它们,它们就可以为您节省大量时间和精力。例如,它们通常可以消除对复杂的嵌套条件块的需求。
嵌套 if 语句很难阅读,因为它们有如此多的代码行,并且在逻辑流中涉及如此多的分支。
下面是嵌套 if 语句的示例:
<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript">if <span style="color:#c792ea">(</span>x <span style="color:#89ddff">></span> <span style="color:#f78c6c">0</span><span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span> if <span style="color:#c792ea">(</span>x <span style="color:#89ddff"><</span> <span style="color:#f78c6c">10</span><span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span> <span style="color:#82aaff">print</span><span style="color:#c792ea">(</span><span style="color:#c3e88d">"x is between 0 and 10"</span><span style="color:#c792ea">)</span><span style="color:#c792ea">;</span> <span style="color:#c792ea">}</span> else <span style="color:#c792ea">{</span> <span style="color:#82aaff">print</span><span style="color:#c792ea">(</span><span style="color:#c3e88d">"x is greater than 10"</span><span style="color:#c792ea">)</span><span style="color:#c792ea">;</span> <span style="color:#c792ea">}</span> <span style="color:#c792ea">}</span> else <span style="color:#c792ea">{</span> <span style="color:#82aaff">print</span><span style="color:#c792ea">(</span><span style="color:#c3e88d">"x is less than or equal to 0"</span><span style="color:#c792ea">)</span><span style="color:#c792ea">;</span> <span style="color:#c792ea">}</span></code></span></span>
使用数组和循环可以更清楚地编写相同的逻辑:
<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript">let numbers <span style="color:#89ddff">=</span> <span style="color:#c792ea">[</span><span style="color:#89ddff">-</span><span style="color:#f78c6c">5</span><span style="color:#c792ea">,</span> <span style="color:#f78c6c">0</span><span style="color:#c792ea">,</span> <span style="color:#f78c6c">5</span><span style="color:#c792ea">,</span> <span style="color:#f78c6c">10</span><span style="color:#c792ea">,</span> <span style="color:#f78c6c">15</span><span style="color:#c792ea">]</span><span style="color:#c792ea">;</span> for <span style="color:#c792ea">(</span>let i <span style="color:#89ddff">=</span> <span style="color:#f78c6c">0</span><span style="color:#c792ea">;</span> i <span style="color:#89ddff"><</span> numbers<span style="color:#c792ea">.</span>length<span style="color:#c792ea">;</span> i<span style="color:#89ddff">++</span><span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span> let x <span style="color:#89ddff">=</span> numbers<span style="color:#c792ea">;</span> if <span style="color:#c792ea">(</span>x <span style="color:#89ddff">></span> <span style="color:#f78c6c">0</span> <span style="color:#89ddff">&&</span> <span style="color:#89ddff"><</span> <span style="color:#f78c6c">10</span><span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span> <span style="color:#ffcb6b">console</span><span style="color:#c792ea">.</span><span style="color:#82aaff">log</span><span style="color:#c792ea">(</span><span style="color:#c3e88d">`</span><span style="color:#c3e88d">x is between 0 and 10</span><span style="color:#c3e88d">`</span><span style="color:#c792ea">)</span><span style="color:#c792ea">;</span> <span style="color:#c792ea">}</span> else if <span style="color:#c792ea">(</span>x <span style="color:#89ddff">></span> <span style="color:#f78c6c">10</span><span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span> <span style="color:#ffcb6b">console</span><span style="color:#c792ea">.</span><span style="color:#82aaff">log</span><span style="color:#c792ea">(</span><span style="color:#c3e88d">`</span><span style="color:#c3e88d">x is greater than 10</span><span style="color:#c3e88d">`</span><span style="color:#c792ea">)</span><span style="color:#c792ea">;</span> <span style="color:#c792ea">}</span> else <span style="color:#c792ea">{</span> <span style="color:#ffcb6b">console</span><span style="color:#c792ea">.</span><span style="color:#82aaff">log</span><span style="color:#c792ea">(</span><span style="color:#c3e88d">`</span><span style="color:#c3e88d">x is less than or equal to 0</span><span style="color:#c3e88d">`</span><span style="color:#c792ea">)</span><span style="color:#c792ea">;</span> <span style="color:#c792ea">}</span> <span style="color:#c792ea">}</span></code></span></span>
此代码更易于阅读,因为它更简洁,逻辑流更线性。for 循环遍历数组的元素,if 语句测试每个元素以查看它是否满足指定的条件。
这通常更有效,因为它消除了对多个条件测试的需求。
8. 尽可能编写自文档代码
自记录代码是易于阅读和理解的代码,无需注释。这种类型的代码的编写方式使其目的明确。
这并不能取代良好的评论习惯,但它确实迫使您牢记高级程序结构。您将生成更易于理解的代码,这些代码更易于维护且不易出错。
有许多方法可以使代码自文档化。我们已经介绍了其中的一些:
- 使用清晰且具有描述性的变量和函数名称。
- 编写做一件事并做好的简短函数。
- 通过使用命名常量来避免幻数(没有明显含义的数字)。
- 使用空格将代码分隔为逻辑块。
- 使用清晰一致的编码约定。这使您的代码更易于阅读和理解,即使对于不熟悉您的代码库的人也是如此。
以下是使代码自文档化的其他一些方法:
- 避免不必要的代码。这包括死代码(不再使用但尚未删除的代码)和声明显而易见的注释。
- 编写易于测试的代码。这意味着您的代码应该是模块化的,并且具有定义良好的接口。它还应该以一致的方式优雅地处理错误。
- 保持较小的代码库。这样可以更轻松地找到要查找的内容并了解代码的工作原理。
- 保持代码井井有条。这意味着使用一致的编码风格和结构,并使用注释来解释复杂的代码。
- 文档很重要,但自我记录代码更好。它更易于阅读、理解和维护。因此,下次编写代码时,问问自己是否可以做些什么来使其更具自我记录性。
这些只是一些准则。随着您成为更有经验的开发人员,您会发现更多使代码自我记录的方法。
9.不要重复自己(干)
良好编码最重要的原则之一是 DRY 原则:不要重复自己。
这意味着应尽可能避免重复代码。重复的代码更难维护,也更容易出错。
可以使用许多工具来避免代码中的重复。
- 功能和模块。函数允许您封装要重用的代码,我们之前已经看过了(当我们第一次提到 DRY 原则时)。模块允许您将相关功能组合在一起。
- 数据结构。数据结构可用于以易于访问和修改的方式存储信息。例如,如果你有一个名称列表,则可以将它们存储在数组中,而不是在整个代码中将它们硬编码为函数调用。
- 遗产。避免重复的更高级方法是使用继承。这是一种通过让一个类继承另一个类来在类之间共享代码的方法。我们不会在这里详细介绍继承,但只要说它是一个强大的工具,可以帮助您避免重复代码就足够了。
- 图书馆。最后,您可以使用工具和库来避免重复。有许多开源库可用于执行常见任务。例如,lodash 库提供了广泛的实用程序函数。
DRY 原则是良好编码最重要的原则之一。尽可能避免重复代码非常重要。这样可以节省您的时间,因为您只解决问题一次,并且只需在其他因素更改时更改解决方案的一个实现。
而且,由于当出现问题时,您只需要修复一个实现,因此 DRY 代码更易于维护且不易出错。
编写 DRY 代码的提示
- 尽可能尝试重用代码,避免重复自己。如果您知道您将在代码中的其他地方再次执行某些操作,则可以在第一次将该代码编写为离散实体,并避免返回重构。
- 重用代码时,请将其模块化。不要将解决方案复制到新位置。相反,将其移动到适当类型的对象或数据结构中,然后引用它。
- 当您看到从重写为 DRY 代码中受益的重要机会时,请重构您的代码。这意味着在不更改其功能的情况下重组代码。重构有时可能是一个拖延陷阱,但如果你意识到你将再次需要一个大函数的一部分,这是值得做的。
- 使用库和框架来避免重新发明轮子。如果你不应该重复自己,你为什么要写代码来解决已经解决的问题?
- 使用继承在类之间共享代码。
- 创建文档时遵循 DRY 原则 - 不要不必要地重复信息。
- 使用清晰的变量和函数名称,并在必要时注释代码。
11. 编写可靠的代码
思考我们如何编写软件的一个流行框架称为SOLID。
SOLID 是一个首字母缩略词,引用了五个关键的软件设计原则,由敏捷软件开发宣言的创始人、《清洁代码》的作者 Robert C. Martin 创造。
SOLID 的五大设计原则是:
- 单一责任原则。该原则指出,每个类或模块都应该有一个(并且只有一个)更改原因。换句话说,每个类或模块应该只负责一件事。
- 开/闭原则。该原则指出,软件应该开放以进行扩展,但对修改关闭。也就是说,您应该能够扩展类或模块的功能,而无需修改代码本身。
- 利斯科夫替代原则。该原则指出子类应该可替代其超类。也就是说,子类应该能够代替其超类而不会引起任何问题。
- 接口隔离原则。该原则指出,不应强迫客户依赖他们不使用的方法。换句话说,每个接口都应该很小,并且专注于特定目的。
- 依赖反转原则。此原则指出,应反转依赖项。也就是说,高级模块不应依赖于低级模块。相反,两者都应该依赖于抽象。
你不需要记住这些原则中的每一个,但它们值得注意。当你开始编写更好的代码时,你可能会发现自己自然而然地遵循这些原则。
12.不要重新发明轮子
良好编码最重要的原则之一是不要重新发明轮子。这意味着您应该尽可能使用现有的库、工具和框架,而不是从头开始编写自己的代码。
遵循这一原则的原因有很多。首先,它可以节省您的时间。您不必编写已编写的代码。其次,它减少了您必须维护的代码量。第三,它增加了其他人发现并修复现有代码中的任何错误的机会。
当然,这条规则也有例外。如果你需要一些尚不存在的东西,你必须自己创建它。但一般来说,最好尽可能重用现有代码。
13. 使用版本控制系统
版本控制系统是一种工具,可用于跟踪一段时间内对代码的更改。
这可能是恢复到以前版本的代码或查看谁在何时更改了代码的有用方法。使用版本控制系统还可以帮助改善协作,因为它允许多个人同时处理同一代码库。
有几种不同的版本控制系统可用,但一些最受欢迎的系统包括 Git 和 Mercurial。
我们建议学习 Git,因为你可以放心地假设你将来加入的大多数团队都将使用它。
GitHub 是一种流行的在线服务,为 Git 存储库提供基于 Web 的界面。它建立在 Git 之上,是当今团队用来协作处理代码的最流行的服务之一。即使作为初学者,您也可能遇到过它。
如果您有兴趣了解有关版本控制的更多信息,我们建议您查看以下一些资源:
结论
编写好的代码对任何开发人员来说都是一项重要的技能,但它需要时间和实践来掌握。
如果你刚刚开始,这篇