清洁代码应用于 JavaScript — 第一部分 开始之前

2025-05-24

清洁代码应用于 JavaScript — 第一部分 开始之前

这篇文章是一系列有趣文章中的第一篇，将深入探讨应用于 JavaScript 的著名主题“干净代码”。

在本系列中，我们将讨论有关干净代码的经典技巧，每个程序员都应该知道，但应用于特定的 JavaScript / TypeScript 语言。

介绍

首先要做的是回顾一下干净代码的概念：

1. 代码异味和重构

代码异味是一种表面迹象，通常与系统中的深层问题相对应——Martin Fowler
糟糕的代码异味可能是导致技术债务的因素之一——Robert C. Martin

在我看来，Martin Fowler 和 Robert C. Martin 的定义是兼容的，因为 Fowler 的定义指出了软件问题的线索，而 Martin 的定义是指代码异味引起的副作用。

2.另一个有趣的术语是技术债务：

技术债务是软件开发中的一个概念，它反映了由于现在选择一个简单的解决方案而不是采用耗时更长的更好的方法而导致的额外返工的隐性成本。

因此，就像生活本身一样，理想的状态是不要负债，但要做到这一点，我们必须拥有健康的经济（经验丰富的程序员和允许开发且不产生负面影响的基础设施）。然而，就像在现实生活中一样，有时我们需要贷款来上大学或购买第一辆汽车，我们会控制债务，并一点一点地连本带利地偿还。在软件开发中，情况也应该完全一样，我们必须承担以后可以偿还的债务。我们谁也不会想到在没有存款和工作的情况下购买价值数百万美元的房子，正是这些债务导致了软件的失败。

因此，代码重构是在不改变其外部行为的情况下重构现有计算机代码的过程。

  • 重构改善了软件的非功能属性。

  • 优点包括提高代码的可读性并降低复杂性。

  • 这些可以提高源代码的可维护性。

  • 创建更具表现力的内部架构，以提高可扩展性。

开始之前

在开始查看 JavaScript 中干净代码的示例之前，一些对于团队合作至关重要的建议非常重要。

人类可读

代码必须易于人类阅读。不要考虑计算机如何处理它，因为有很多工具（编译器）可以转换我们的代码。因此，最重要的是代码易于人类阅读，因为在开发代码的过程中，你花费时间最多的工作是阅读代码，而不是编写代码。

下面是同一个用户数组的三个示例。这三个示例中，哪个更易读？哪个示例更省脑力？嗯，你应该这样构建你的代码。

    const users = [{ id: 1, name: “Carlos Caballero”, memberSince: “1997–04–20”, favoriteLanguageProgramming: [“JavaScript”, “C”, “Java”] }, { id: 2, name: “Antonio Villena”, memberSince: “2014–08–15”, favoriteLanguageProgramming: [“Go”, “Python”, “JavaScript”] }, { id: 3, name: “Jesús Segado”, memberSice: “2015–03–15”, favoriteLanguageProgramming: [“PHP”, “JAVA”, “JavaScript”] } ];

    /***********************/

    const users = [
    { id: 1, name: “Carlos Caballero”, memberSince: “1997–04–20”, favoriteLanguageProgramming: [“JavaScript”, “C”, “Java”] },
    { id: 2, name: “Antonio Villena”, memberSince: “2014–08–15”, favoriteLanguageProgramming: [“Go”, “Python”, “JavaScript”] },
    { id: 3, name: “Jesús Segado”, memberSice: “2015–03–15”, favoriteLanguageProgramming: [“PHP”, “JAVA”, “JavaScript”] },
    ];


    /***********************/

    const users = [{
     id: 1,
     name: “Carlos Caballero”,
     memberSince: “1997–04–20”,
     favoriteLanguageProgramming: [“JavaScript”, “C”, “Java”],
    },
    {
     id: 2,
     name: “Antonio Villena”,
     memberSince: “2014–08–15”,
     favoriteLanguageProgramming: [“Go”, “Python”, “JavaScript”],
    },
    {
     id: 3,
     name: “Jesús Segado”,
     memberSince: “2015–03–15”,
     favoriteLanguageProgramming: [“PHP”, “JAVA”, “JavaScript”],
    }];
Enter fullscreen mode Exit fullscreen mode

用英语发展

我不是英语母语者，事实上，我在这个行业中最大的问题是，与我的母语相比，我几乎无法用英语进行良好而有趣的对话。然而，在课堂上，我告诉学生，他们必须用英语编写代码，因此，我所有的代码都是用英语开发的。除非你有幸成为英语母语者，否则使用蹩脚的英语总比使用母语要好。原因是英语在世界范围内用于商业活动。你可能喜欢也可能不喜欢，但世界上每个人都明白，英语是与其他国家互动时应该使用的语言，而且正如我之前告诉你的，你大部分时间都在阅读代码。想象一下，用一种你无法知道变量或函数名称的语言阅读代码，所有代码都会被加密。

因此，即使英语不是你的母语，你也必须提高英语水平。我们会边工作边学习英语。无论如何，想想我，我不是母语人士，但我每天都会读写英语，当然也会有错误，但我们必须彼此理解，因为使用语言时，重要的是要表达出我们的意思。

尝试推断以下代码片段的功能，用你熟悉的语言实现一些非常基础的功能。也就是说，以下代码片段使用了多种语言，并且使用了英语（当然，如果示例语言之一是你的母语，你就能理解）。无论如何，如果你精通多种语言，请使用谷歌翻译，将代码转换成另一种你不熟悉的语言，然后尝试推断代码的功能。

    const benutzer = {
     id: 1,
     name: “John Smith”,
     mitgliedVon: “1997–04–20”,
    };

    Gehaltserhöhung(benutzer, 1000); 

    /***********************/

    const użytkownik = {
     id: 1,
     imię: “John Smith”,
     członekZ: “1997–04–20”,
    };
    wzrostWynagrodzeń(użytkownik, 1000);

    /***********************/

    const user = {
     id: 1,
     name: “John Smith”,
     memberSince: “1997–04–20”,
    };
    increaseSalary(user, 1000);
Enter fullscreen mode Exit fullscreen mode

团队合作

从前，有一位程序员正在开发一个软件项目……多么美丽的故事！我们就是这样独自学习软件开发的。我们面对着电脑输入代码、解决问题，但如今，没有人能独自开发软件。

因此，我们必须考虑团队合作。初级程序员之间永恒的讨论是：

  • 使用空格或制表符来制表。

  • 打开功能名称旁边或下一行的键。

  • 在句子末尾加一个分号。

这些论点听起来合理吗？抱歉，这些讨论很荒谬，因为这些决定是所有团队成员达成一致的，然后使用开发工具修改代码，使其适用于所有人。

当程序员打开项目文件并开始阅读代码时，整个开发团队就融为一体了，他无法推断代码是由他本人还是队友编写的。这正是团队发展的完美契机，我们成为了一个共同协作的优秀程序员。需要提醒的是，如果我们需要知道代码的编写者，我们拥有 GIT 等强大的工具。

因此，为了直接在团队中工作，我们需要：

我们不必强制使用特定的 IDE，因为标准的.editorconfig文件允许我们为每个团队成员选择最合适的 IDE。每个人都是独立的个体，并非每个人都应该使用 WebStorm、VSCode 或 Eclipse，因为有人已经制定了允许我们配置基本结构元素（例如 .editorconfig 文件）的标准。

.editorconfig帮助开发人员在不同的编辑器和 IDE 之间定义和保持一致的编码风格。

    root = true

    [*]
    end_of_line = lf
    insert_final_newline = true

    [*.{js,py}]
    charset = utf-8

    [*.py]
    indent_style = space
    indent_size = 4

    [Makefile]
    indent_style = tab

    [*.js]
    indent_style = space
    indent_size = 2

    [{package.json,.travis.yml}]
    indent_style = space
    indent_size = 2
Enter fullscreen mode Exit fullscreen mode

Lint工具允许我们根据自己制定的规则查找代码格式中的错误。每种语言都有自己的 Lint 工具，您可以根据自己的开发语言进行检查，并在所有语言中配置 Lint 工具并全部使用。虽然约定俗成，但有时项目中的代码可能并非如您所愿，但至少您可以继续保持这种编写方式，并将修改代码的任务委托给 IDE，这样就不会给您带来麻烦。

    {
     “globals”: {
     “myModule”: true
     },
     “env”: {
     “browser”: true
     },
     “rules”: {
     “no-unused-vars”: “error”,
     “quotes”: [“warning”, “double”]
     }
    }
Enter fullscreen mode Exit fullscreen mode 
    const a = ‘a’;
    const b = a;
    const c = b;
Enter fullscreen mode Exit fullscreen mode

业界广泛使用的工具是 Prettier，它允许根据 Linter 规则实时更改代码格式（IDE 插件）。这使我们能够专注于需要解决的问题，此外，通过团队的团结协作，我们能够生成干净的代码。

结论

在本文中，我们在尝试阐述代码整洁之道和建议之前，总结了几个基本要点。我们讨论的原则适用于所有开发人员：

  • 编写可读性强的代码，而不是机器可读的代码。大多数时候，你都会阅读代码，既包括你自己的，也包括你合作伙伴的。

  • 用英语写。如今英语是国际语言，我们必须国际化，因为这样我们才能与世界上任何人共享代码。

  • 团队合作。创建通用规则，并依赖能够为每个人生成统一代码的工具。你必须让整个项目看起来像是由一个人编写的，而不是看到开发团队不同成员的不同习惯。

文章来源：https://dev.to/carlillo/clean-code-applied-to-javascript-part-i-before-your-start-16ic
Devto 翻译
PREV
应用于 JavaScript 的整洁代码 — 第三部分。函数简介使用默认参数代替短路或条件函数参数（理想情况下 2 个或更少）避免副作用 - 全局变量避免副作用 - 对象可变函数应该只做一件事函数应该只有一个抽象级别倾向于函数式编程而不是命令式编程使用方法链结论
NEXT
12 个简单示例，带你了解 ES10 的 12 个特性