分享 10 种适合初学者的技术，这些技术将帮助您立即编写更好的代码。因此，如果您准备好将您的编码技能提升到一个新的水平，请继续阅读！
1. 从计划开始
编写更好代码的最佳方法之一是从计划开始。在开始编码之前，请花几分钟时间考虑一下您希望代码执行的操作。
不要只是因为您认为自己知道需要做什么而跳入编写代码。花一些时间真正了解手头的问题。
输入和输出是什么？
预期结果是什么？
从一个到另一个涉及哪些步骤？
您需要哪些数据结构？
是否有任何需要考虑的边缘情况？
在开始编码之前回答这些问题可以帮助您避免在兔子洞中迷路数小时或数天。它让你有机会巩固你对项目如何运作的心理概念化，根据任何明显的神奇思维飞跃来验证它，并开发一组测试用例来检查你的工作。
Wining可能很有趣（而且通常很诱人），但这种方法不需要以狭窄的方式限制你或占用数小时的时间。在你启动编辑器之前，即使是在纸上画出几分钟的图表，也会带来巨大的回报。
清楚地了解需要做什么，使您能够将想法转化为具体的计划。即使你开发的高级程序结构并不完美（让你内心的完美主义者摆脱困境——它不会！），你会发现生成的代码更容易阅读，扩展代码的复杂性更容易管理。
虽然您的代码会更简洁，但如果您发现了一些未知因素并制定了计划，您将真正从节省的无数时间中受益匪浅。这是为解决更高级的问题和发展有益于您和您的职业生涯的技能而获得的无数小时。
制定高级计划的提示
- 清楚地了解您要解决的问题。
- 在开始编码之前，请花一些时间考虑一下您希望代码执行哪些操作以解决此问题。
- 在开始编码之前编写伪代码。伪代码是还不是真正代码的代码。它对于勾勒出代码的结构很有用，而不会陷入细节的泥潭。
- 绘制图表。可视化问题可以帮助您更好地了解需要做什么以及不同的部分如何组合在一起。
- 检查您的工作。一旦你有一个计划，检查它与任何明显的神奇思维飞跃，并确保它是可行的。
- 使用内联评论来解释您的思维过程。编写代码后，请包含内联注释来解释您正在执行的操作和原因。当您或其他人稍后返回到代码时，这些注释非常有用。如果您正在处理一个可能会让其他人感到困惑的复杂问题，则尤其如此。
2. 编写有意义的变量和函数名称
编写良好的代码的标志之一是易于阅读和理解。使代码易于阅读的一个重要部分是使用有意义的变量和函数名称。
为事物取好名字是很困难的。但这很重要，即使在 Web 开发中也是如此。变量和函数名称通常是人们在尝试理解您的代码时首先要看的东西。
请考虑以下示例：
<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript">let x<span style="color:#c792ea">,</span> y<span style="color:#c792ea">,</span> z<span style="color:#c792ea">;</span> function <span style="color:#82aaff">f</span><span style="color:#c792ea">(</span><span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span> <span style="color:#697098">// function</span> <span style="color:#c792ea">}</span></code></span></span>
这段代码不是很容易阅读。x、y 和 z 代表什么？f（） 有什么作用？
现在考虑这个例子：
<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript">let firstName<span style="color:#c792ea">,</span> lastName<span style="color:#c792ea">;</span> function <span style="color:#82aaff">printFullName</span><span style="color:#c792ea">(</span>firstName<span style="color:#c792ea">,</span> secondName<span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span> <span style="color:#697098">// function</span> <span style="color:#c792ea">}</span></code></span></span>
此代码更易于阅读。变量名称是信息丰富的，函数名称让我们很好地了解它的作用。
在查看代码时，您也更有可能发现错误。当名称是描述性的时，更容易发现错误 - 例如将错误的变量传递给函数。否则，您必须始终将该变量的含义保存在您的工作记忆中。
很容易记住我们为什么定义变量a，但是在你的工作记忆中保存密码变得势不可挡——早在你定义z之前。这成为一种认知瓶颈，会严重限制您能够管理的复杂性范围。
您还应该采用一致的样式来设置名称的格式。当人们在开发中提到命名约定时，他们通常会谈论使用大写和分隔符来增强可读性的方式。
以下是您在开发中最常看到的命名约定：
- 骆驼案： 变量名称由一系列单词组成，这些单词连接在一起，除第一个单词外，每个单词都以大写字母开头。示例：firstName， lastName， printFullName（）。驼峰大小写在 JavaScript 中很常见。
- 帕斯卡案例：帕斯卡大小写类似于骆驼大小写，但第一个单词也是大写的。示例：FirstName， LastName， PrintFullName（）。
- 蛇案：蛇形大小写使用所有小写字母和下划线来分隔单词。示例：first_name、last_name、print_full_name（）。
- 烤肉串案例：烤肉串大小写类似于蛇大小写，但使用连字符而不是下划线。示例：名字、姓氏、打印全名（）。
选择命名约定后，保持一致并坚持下去非常重要。
例如，您可能决定对变量名称使用驼峰大小写 （firstName），对函数使用蛇大小写 （print_full_name（））。在这种情况下，使用不同的约定使得一致性对于可读性尤为重要。您暗示每个命名约定都有其含义。
如果这是随机更改的，则需要解释您的代码的其他人将不得不放慢速度并可能误解它，或者只是不得不放慢速度并应用不必要的更多焦点。
编写清晰变量名称的提示
变量和函数名称应为：
- 描述。
- 易于记忆和发音。
- 与代码中的其他名称一致。
为此，您应该：
- 使用描述性名称。变量或函数的名称应描述其用途。
- 避免使用单个字母名称，除非从上下文中含义非常清楚。例如，通常可以将 i 用作 for 循环中的索引，因为这是一个常见的约定。
- 避免使用幻数。幻数是代码中使用的数字文字，没有明确解释其含义。
- 确定命名约定，然后坚持下去。
- 与往常一样，注释您的代码。当一个清晰的名称是不够的，并且您确实需要查看原始函数或变量时，您将能够快速刷新内存。
当您为事物选择名称时，请问自己以下问题：
- 这个变量或函数有什么用？
- 它的名字是否描述了它的目的？
- 我什么时候发音容易记住吗？
- 它是否与代码中的其他名称一致？
如果您不能轻松回答所有这些问题，那么选择一个不同的名称可能是个好主意。
3. 编写小型模块化函数
函数是程序员工具箱中最强大的工具之一。它们允许您处理一个大问题并将其分解为更小、更易于管理的部分。
较小的函数更易于测试、调试和重用。它们还使您的代码更具可读性，因为每个函数的目的都很明确。
请考虑以下示例：
<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript">function <span style="color:#82aaff">multiplySquaredNumbers</span><span style="color:#c792ea">(</span>x<span style="color:#c792ea">,</span> y<span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span> let xSquared <span style="color:#89ddff">=</span> x <span style="color:#89ddff">*</span> x<span style="color:#c792ea">;</span> let ySquared <span style="color:#89ddff">=</span> y <span style="color:#89ddff">*</span> y<span style="color:#c792ea">;</span> return xSquared <span style="color:#89ddff">*</span> ySquared<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:#82aaff">multiplySquaredNumbers</span><span style="color:#c792ea">(</span><span style="color:#f78c6c">5</span><span style="color:#c792ea">,</span> <span style="color:#f78c6c">6</span><span style="color:#c792ea">)</span><span style="color:#c792ea">)</span><span style="color:#c792ea">;</span> <span style="color:#697098">// Output: 360</span></code></span></span>
如您所见，此函数接受两个参数。它声明变量来管理对输入参数进行平方的结果，以便后续行可以对它们进行操作。在这里，这发生在返回行上，当这些变量在单个数字传递回调用方之前相乘时。
我们还有其他方法可以简化此功能，您可能已经发现了。这是其中之一：
<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript">function <span style="color:#82aaff">multiplySquaredNumbers</span><span style="color:#c792ea">(</span>num1<span style="color:#c792ea">,</span> num2<span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span> return <span style="color:#ffcb6b">Math</span><span style="color:#c792ea">.</span><span style="color:#82aaff">pow</span><span style="color:#c792ea">(</span>num1<span style="color:#c792ea">,</span> <span style="color:#f78c6c">2</span><span style="color:#c792ea">)</span> <span style="color:#89ddff">*</span> <span style="color:#ffcb6b">Math</span><span style="color:#c792ea">.</span><span style="color:#82aaff">pow</span><span style="color:#c792ea">(</span>num2<span style="color:#c792ea">,</span> <span style="color:#f78c6c">2</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:#82aaff">multiplySquaredNumbers</span><span style="color:#c792ea">(</span><span style="color:#f78c6c">2</span><span style="color:#c792ea">,</span> <span style="color:#f78c6c">3</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">function <span style="color:#82aaff">square</span><span style="color:#c792ea">(</span>x<span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span> return x <span style="color:#89ddff">*</span> x<span style="color:#c792ea">;</span> <span style="color:#c792ea">}</span> function <span style="color:#82aaff">multiplySquaredNumbers</span><span style="color:#c792ea">(</span>x<span style="color:#c792ea">,</span> y<span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span> return <span style="color:#82aaff">square</span><span style="color:#c792ea">(</span>x<span style="color:#c792ea">)</span> <span style="color:#89ddff">*</span> <span style="color:#82aaff">square</span><span style="color:#c792ea">(</span>y<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:#82aaff">multiplySquaredNumbers</span><span style="color:#c792ea">(</span><span style="color:#f78c6c">5</span><span style="color:#c792ea">,</span> <span style="color:#f78c6c">6</span><span style="color:#c792ea">)</span><span style="color:#c792ea">)</span><span style="color:#c792ea">;</span> <span style="color:#697098">// Output: 360</span></code></span></span>
乍一看，很难看出这种方法如何帮助我们编写更好的代码。此示例过于简单（并且依赖于太多的基本运算符），无法减少代码行数。事实上，我们添加了一对。
简洁的代码始终比不必要的冗长代码更受欢迎。但是，除非您要完成代码挑战，否则不要以牺牲健壮、可读的代码为代价来实现它。
重要的是要明白，代码模块化并不是在代码中追求极简主义。这是关于在问题再次出现时从您花在解决问题上的时间中受益。
现在，每当我们想要在未来对一个数字进行平方时，我们将能够使用我们的模函数来完成这项工作，即使我们永远不需要再次将两个平方数相乘。我们已经告诉计算机如何完成这项工作。我们不妨从中受益！
如果我们采用原始示例中的方法，则必须在想要为后续操作对一些数字进行平方时告诉解释器如何进行。
这是一个简单的例子，但它说明了如何使用函数将较大的问题分解为较小的部分。
在Web开发中，您需要反复解决的问题通常更为复杂。例如，您可能需要显示来自 API 调用的数据列表。这涉及获取数据、迭代数据以及动态创建在页面上显示某些数据的元素。
解决这个问题一次就很好，但是如果你需要在每次进行API调用或更新数据列表时都这样做，你将不得不复制大量代码。这将很快变得难以管理，特别是随着可能需要显示此列表的不同位置的数量增加。
相反，您可以创建一个函数，该函数获取一些数据并返回在页面上显示该数据所需的元素。然后，每当需要创建这些元素时，都可以使用适当的数据调用函数。这将使我们能够保持代码干燥并避免重复自己。
编写模块化函数的提示
在编写模块化函数时，您可以遵循一些最佳实践：
通过赋予职能单一责任来保持职能规模较小
当你编写一个函数时，想想它应该做什么，并且只让它这样做。
编写一个大型的、包罗万象的函数，一次性完成所有工作可能很诱人。但这会使您的代码更难推理，并可能导致错误。
通常最好编写几个小函数，每个函数做一件事。这些更易于测试，并且更有可能在代码的不同部分中重用。
以描述性方式命名函数
函数名称应清晰且具有描述性，以便您（和其他开发人员）在阅读代码时可以轻松理解它们的作用。我们已经讨论了命名，但这对于在整个代码库中重复使用的函数尤其重要。
避免副作用
如果函数修改了超出其范围的内容，则称其具有副作用。例如，将数组作为参数并对数组进行排序的函数将被视为具有副作用。
没有副作用的函数称为纯函数。这些通常是首选，因为它们更可预测。
一直避免副作用可能很困难，但在编写函数时要记住这一点。
明智地使用参数
当您决定在函数中包含哪些参数时，请考虑它们是否真的必要。
参数通常用于使函数更灵活，以便可以在不同情况下使用。但是太多的参数会使函数难以理解和使用。
通常，包含较少数量的精心选择的参数比包含大量不太重要的参数更好。
在提交代码时有哪些注意事项2:https://developer.aliyun.com/article/1505985
