介绍

了解清洁代码的概念

编写代码不仅是要完成工作。这也是要以易于理解，维护和扩展的方式表达解决方案。这个概念使我们达到了“干净代码”的概念。

Clean Code是罗伯特·C·马丁（Robert C.这是易于理解且易于更改的代码。这不仅是指代码是否有效，还涉及其他开发人员（以及您的未来自我）可以理解代码的程度，以及如何轻松地调整或扩展以适应新功能或更改在要求。

为什么干净的代码在JavaScript中很重要

在JavaScript领域中，由于语言的灵活性和动态性质，干净代码的重要性更加明显。 JavaScript是Web的核心语言之一，并且具有广泛的应用程序，从带有Node.js的服务器端编程到富客户端交互。这是网络开发的通用语言。

然而，JavaScript也因允许较差的编码标准而臭名昭著。这可能会导致难以理解的代码库，充满错误且难以维护。这就是为什么在编写JavaScript时遵守清洁代码原则的原因可以显着提高您的代码质量，从而减少在调试上花费的时间并提高代码库的可读性和可维护性。

在以下各节中，我们将深入研究可以帮助您编写清洁，高效且可维护的JavaScript代码的原理，最佳实践和工具。无论您是新手JavaScript开发人员还是希望改善工艺的经验丰富的编码员，本文适合您。

JavaScript编码约定

编码约定是针对特定编程语言的一组准则，该指南建议使用该语言编写的程序的各个方面进行编程样式，实践和方法。这些惯例提供了一种连贯的方式来确保代码更可读性和易于理解。与其他开发人员合作时，它们特别重要。

命名约定

JavaScript中的命名惯例很简单，但它们对代码可读性的影响是深远的。变量，函数，类和标识符应具有清晰有意义的名称，以表明其目的或其持有的价值。

• 变量和函数名称：使用骆驼用于变量和函数名称。从小写字母开始，如果该名称由多个单词组成，则在第一个单词（例如myVariableName，calculateTotalSum）之后大写。

• 常数：使用单词之间的大写字母（例如，MAX_COUNT，API_URL）。

• 类和构造函数：使用与骆驼相似的pascalcase，但是标识符的第一个字母已大写（例如，StudentRecord，LinkedList）。

格式和间距

正确的格式和间距使您的代码易于阅读和遵循。这涉及适当的凹痕，使用空间和括号的放置。

• 凹痕：使用空间进行凹痕。标准是两个空间，但是可以使用四个空间来进行更多的视觉差异。

• Whitespace ：使用操作员周围的空格（例如let x = y + z;不是let x=y+z;）。另外，使用逗号和半隆之后的空格。

• 括号：JavaScript不会强制放置括号的位置，与某些语言不同。但是，普遍的做法是将开场支架放在线的末端，将闭合支架放在新线路上，与开场线的凹痕（称为1TB或一个真正的支撑样式）保持一致。

  。

评论指南

注释应提供其他不明显的代码的上下文或说明。但是，良好的代码应大部分记录本身。如果您发现自己写评论以解释复杂的代码块，请考虑重构代码以使其更清晰。

• 单行注释：对于简短的说明，请使用以//开头的单线注释。

• 多行注释：对于更长的描述，请使用以/*开头的多行注释，并以*/结尾。

• 函数/方法注释：使用JSDOC或类似文档语法描述函数或方法的目的，参数和返回值。

在下一部分中，我们将探讨干净代码的原理，以帮助我们在JavaScript代码中塑造和调整这些约定的方式。

JavaScript中的干净代码原理

干净代码的原则为我们如何处理编码提供了基础，无论我们使用的语言如何。这些原则不是艰难而快速的规则，而是旨在提高我们编写的代码质量的准则。他们鼓励我们编写易于阅读，理解和修改的代码，从而使其随着时间的流逝而变得更加维护。

亲吻（保持简单，愚蠢）

亲吻原则强调了简单的重要性。当可用的解决方案可用时，请避免使用复杂的解决方案。在JavaScript中，这可能意味着使用内置方法而不是创建自定义逻辑，或者将功能保持较小而专注于单个任务。您的代码越简单，测试，维护和调试就越容易。

干（不要重复自己）

干燥是旨在减少代码重复的原则。重复代码很难维护，因为需要在多个位置进行更改。在JavaScript中，您可以使用功能，循环和模块封装重复的逻辑来遵守干燥原理。

Yagni（您不需要）

yagni是一个原则，它鼓励开发人员在需要之前不要添加功能。添加不必要的功能或为将来的编码编码，未确认的要求可以使代码库更加复杂和难以维护。在JavaScript中，这意味着要在需要新功能或更改时重点满足当前要求并重构代码。

坚实的原则

虽然坚实的原理起源于面向对象的编程的背景，但它们也为JavaScript开发人员提供了宝贵的见解。它们由五个原则组成：单一责任，开放/关闭，Liskov替代，界面隔离和依赖性反转。

越

• 打开/封闭：JavaScript实体（功能，模块等）应打开以进行扩展，但要封闭以进行修改。这意味着您应该能够在不更改现有代码的情况下添加新功能。

• liskov替换：如果一个函数接受特定类型的对象，则如果通过派生类型的对象，则应正确工作。

• 界面隔离：而不是一个大界面，而是优选的几个较小，更具体的接口。

• 依赖关系反转：高级模块不应取决于低级模块。两者都应取决于抽象。

在下一部分中，我们将深入研究一些具体的最佳实践，以实施这些原则和惯例来编写干净的JavaScript代码。

编写干净JavaScript代码的最佳实践

编写干净的JavaScript代码涉及遵循一组最佳实践，以使您的代码更有效，可读和可维护。这些实践与我们之前已经讨论过的原则和惯例相吻合，并以实际的方式应用它们。

使用“严格使用”

JavaScript的“使用严格”指令可确保您的代码中更严格的解析和错误处理。这可以防止常见的JavaScript陷阱，例如使用未申报的变量。在JavaScript文件或功能的顶部包括“严格使用”可以帮助您编写更安全，更可靠的代码。

避免全局变量

JavaScript中的全局变量很容易导致命名冲突，意外行为和调试困难。作为最佳实践，请始终声明您的变量并在适当的范围内使用它们。使用let和const关键字进行块范围，并避免使用具有功能范围的var，并可能导致意外结果。

正确处理错误

在任何编码过程中，错误都是不可避免的。但是，优雅地处理它们可以显着提高您的代码的可靠性和可用性。始终使用try-catch块处理错误并向用户提供有意义的反馈。对于异步代码，请确保处理承诺拒绝。

持续使用分号

虽然JavaScript允许自动插入（ASI），但建议在每个语句后始终使用半olon。这可以防止意外结果并使您的代码更可读。

有效使用ES6功能

es6或Ecmasipript 2015引入了许多功能，这些功能使JavaScript更强大，更易于使用。这些包括箭头功能，模板文字，破坏，传播和休息运算符，承诺等等。理解并有效地使用这些功能可以帮助您编写更清洁，更有效的JavaScript代码。

在下一节中，我们将讨论如何有效地组织和构建JavaScript代码，这是编写干净代码的另一个基本方面。

代码组织和结构

如何构造代码会对其可读性和可维护性产生深远的影响。这不仅包括单个文件中的代码安排，还包括如何组织文件和目录。

将代码组织成功能和模块

功能和模块是结构良好的JavaScript代码库的基本构建块。它们有助于封装相关功能，使代码更易于理解和维护。

• 函数：函数应该做一件事并做得好。这使其易于命名，易于理解。使您的功能短，不要害怕将大功能分为较小的功能。

• 模块：使用模块将相关功能分组在一起。 JavaScript模块允许您从一个模块到另一个模块导出和导入函数，对象或值，从而保持全局名称空间。

文件和目录结构

组织文件和目录的方式也可能影响代码的可维护性。

• 相关文件：保持相关文件彼此紧密。例如，如果您使用的是诸如React之类的框架，则将组件文件及其相应的CSS保存在同一目录中可能是有意义的。

• 目录结构：围绕功能而不是角色组织目录。例如，您可能拥有一个users目录，而不是具有controllers目录和一个models目录，而是拥有一个users目录和一个products目录，每个目录都包含相关的控制器和模型。

依赖管理

管理依赖性是维护干净代码库的关键部分。

• 软件包经理：使用NPM或纱线等软件包管理器来管理您的外部依赖关系。这使您可以轻松地跟踪所使用的软件包及其版本。

• 导入/导出：使用JavaScript的import和export语法清楚地表达您自己的模块之间的依赖。

通过很好地组织代码，您可以使他人（以及未来的自我）更容易导航和理解您的代码库。这可以大大减少在调试和添加新功能上花费的时间。在下一部分中，我们将讨论测试和代码审查在维护干净代码中的作用。

测试和代码审查

测试和代码审查是开发过程的关键部分，可帮助维持代码的清洁度和完整性。它们是安全网，捕获了可能在初始编码阶段被忽略的潜在错误，矛盾和设计问题。

JavaScript中的单元测试

单元测试涉及测试各个代码单位（例如功能或方法），以确保其行为能够按预期进行。 JavaScript有几个库，例如Jest，Mocha和Jasmine，这些库是为单位测试而设计的。

• 为所有新代码编写测试：这确保您的代码能够按预期工作，并在更改时防止回归。
• 遵循安排，ACT，断言（AAA）模式：通过设置必要的对象和依赖项来安排测试，然后通过调用您要测试的功能来采取行动，最后通过验证结果来确定结果是您所期望的。

集成测试

集成测试确保代码的多个组件可以正确工作。尽管单元测试集中在各个零件上，但集成测试集中在整个或一个子集上。

• 测试通用工作流程：例如，如果您要构建电子商务网站，则可以为工作流程编写集成测试“用户将项目添加到购物车，结帐并完成购买”。

代码评论的作用

代码评论是一个过程，除了代码评论的作者以外的其他人以外的其他人。它们有助于捕获潜在的问题并提高代码质量，但这也是团队成员互相学习的绝佳机会。

• 同行评论：让其他开发人员审查您的代码。他们可能会发现您错过的潜在问题或改进，也可以从您的方法中学习。
• 自动代码评论：使用Eslint或Prettier等工具自动执行编码标准并捕获潜在的问题。

通过将定期测试和代码评论纳入工作流程，您可以尽早发现和解决问题，防止错误进入生产，并保持高标准的代码质量。在下一节中，我们将讨论重构的过程以及如何帮助您保持代码库清洁和高效。

重构JavaScript代码

重构是重组现有代码而不改变其外部行为或功能的过程。目的是改善代码的内部结构，使其更容易阅读，理解和维护。重构在维护干净的JavaScript代码库中起着至关重要的作用，并且在与实心测试实践配对时可能更有效。

何时重构

确定正确的重构时间取决于情况。这是一些常见的触发器：

• 代码气味：代码气味是表明更深层问题的代码的特征。它们可能是复杂性，冗余或效率低下的迹象。当您发现这些时，通常是重构的好时机。

• 添加新功能：通常更容易在干净，结构良好的代码库中添加新功能。因此，如果您要添加新功能，请考虑一些重构是否会使您的工作更容易。

• 在错误修复期间：如果要修复错误，则已经修改了代码。这可能是改善代码结构的好机会。

重构技术

以下是在重构JavaScript代码时可能会有所帮助的一些技术：

• 红绿色的重构：这是测试驱动开发原理（TDD），它建议首先编写失败的测试（RED），使其以最简单的方式通过（绿色），然后用测试的安全性重构代码。

• 提取功能：如果您的功能长或做太多事情的函数，请考虑将其分解为较小，更易于管理的功能。

• 用查询替换temp ：如果您使用临时变量来保存表达式的结果，请考虑为表达式创建函数。

• 删除死亡代码：如果在任何地方都没有使用代码，请删除它！死亡代码可以使代码库更难理解和维护。

通过定期重构代码，您可以不断提高其质量和可维护性。但是，重要的是要记住，重构应以较小的，易于管理的步骤进行，并且总是在一系列良好的测试的支持下进行。

使用工具维护干净的代码

可以利用几种工具来执行编码标准并保持JavaScript代码的清洁度。这些工具可自动执行例程任务，捕获潜在的错误并强制执行一致的编码样式，这极大地有助于您的代码的质量和可维护性。

衬里

linter分析您的代码，以了解潜在的错误和编码样式不一致。在JavaScript中，使用最广泛的Linter是Eslint。

• Eslint ：ESLINT是一种可根据项目需求进行自定义的高度配置工具。您可以使用它来执行某些编码约定，防止使用某些语法或捕获常见的JavaScript陷阱。

格式化

代码格式器以一致的样式自动格式化代码。这可以有助于在您的代码库中保持一致性，尤其是在团队中工作时。

• Prettier ：Prettier是一种自以为是的代码格式，它支持许多语言，包括JavaScript。它删除了所有原始样式，并确保所有输出的代码都符合一致的样式。

代码编辑器

现代代码编辑器带有各种内置功能和插件，可以帮助您编写清洁器代码。

• Visual Studio Code ：VS代码是一个强大的编辑器，内置了对JavaScript和Typescript的支持，并且具有大量可用的扩展名。它包含用于代码完成的Intellisense之类的功能，并与Linter和Formatters良好集成。

• Sublime Text ：Sublime Text是JavaScript开发人员中的另一个流行编辑。它是轻巧的，可定制的，并且具有广泛的插件。

测试框架

测试框架可帮助您编写测试，以确保您的代码在预期的情况下工作并捕获错误，然后才能将其用于生产。

• 开玩笑：开玩笑是JavaScript的综合测试框架，可以使用最少的配置在开箱即用。它包括测试跑步者，断言库和模拟支持等功能。

• Mocha/chai ：摩卡咖啡是一个支持异步测试的功能富含特征的测试框架，使其非常适合测试Node.js应用程序。柴是一个经常与摩卡咖啡一起使用的断言库。

版本控制系统

版本控制系统可帮助您跟踪代码的更改，与其他开发人员协作并管理代码的不同版本。

• git ：git是使用最广泛的版本控制系统。它是分布式的，这意味着每个开发人员在本地机器上拥有整个项目历史记录的完整副本。 GitHub，Bitbucket和Gitlab是Git存储库的流行托管服务。

通过将这些工具纳入您的开发过程中，您可以自动执行常规任务，在问题上捕获错误，并确保您的代码保持清洁和可维护。

实例探究

说明本文讨论的清洁代码原则和最佳实践的实际应用，让我们深入研究一些案例研究。这些示例表明，特定项目如何从遵守JavaScript中的清洁编码原理和实践中受益。

案例研究：重构遗留代码库

XYZ公司收购了一家较小的公司时，XYZ继承了一个大型旧的JavaScript代码库。该代码带有不一致之处，具有高度的耦合，并且缺乏单位测试。

他们首先使用Prettier和Eslint执行一致的代码样式，从而使代码更可读并消除许多潜在的错误。然后，他们着手进行重构过程，将大功能分解为较小的功能，并删除不必要的代码。

当他们进行了这些更改时，他们实施了单元测试，确保重构过程不会引入新的错误。在此过程结束时，该代码不仅更清洁，更易于使用，而且还具有完整的单元测试以防止将来的回归。

案例研究：实施代码审查

启动ABC有一个小型开发团队，从未进行过代码评论。在经历了一些本来可以通过审核过程捕获的生产错误之后，他们决定实施同行代码评论。

通过将代码评论纳入其流程中，他们能够在将它们合并到主代码库中之前捕获潜在的错误和架构问题。这导致了更强大的代码，并为团队提供了从彼此的编码实践中学习的机会。

案例研究：使整体代码库模块化

Tech Inc.启动时，他们的Web应用程序相对较小且简单。但是，随着应用程序的增长，其JavaScript代码库也是如此。它变成了难以导航和维护的整体野兽。

为了解决这个问题，他们决定将其代码库重组为模块，每个代码库都封装了应用程序功能的特定部分。这使代码更容易理解和维护。在此过程中，他们还开始使用ES6功能，例如箭头功能和承诺，这有助于使代码更加高效，更清洁。

这些案例研究说明了清洁代码原则的实际应用，以及它们如何导致更可维护，可靠的代码。通过优先考虑清洁代码，这些公司能够提高其产品质量和开发流程的效率。

结论

在JavaScript中编写干净的代码是一项有价值的投资，可以在可维护性，可读性和效率上付出红利。通过遵守广泛接受的编码惯例，应用干净的代码原则并利用各种最佳实践，您可以将代码转换为明确对其读者说话并强大地执行其预期任务的艺术。

我们探索了如何有效地使用和构建功能和模块，管理依赖项以及处理JavaScript中的错误。我们还强调了测试和代码审查在维护清洁代码方面的重要性，并参与了重构的过程，以不断提高代码质量。诸如Linters，Formatters，代码编辑器，测试框架和版本控制系统之类的工具被突出显示为实现和维护干净代码的重要工具。

我们还研究了一些案例研究，这些案例研究说明了这些原则和实践的实际应用，证明了它们在现实世界中的变革力量。

最后，目标不仅是编写有效的代码，而且是编写经受时间考验的代码，并且可以轻松地理解，扩展和维护他人和您的未来自我。本文概述的原则和实践并不详尽，而是为您提供坚实的基础，您可以在您的编码旅程中不断学习，改进和培养清洁代码文化。

正如罗伯特·马丁（Robert C.因此，]使其易于阅读使其更容易编写。”因此，努力使您的代码成为一种阅读和创建不仅有效的软件的乐趣，而且还散发着其设计和结构的质量和工艺。愉快的编码！