如何写好javascript｜ 青训营

Javascript 是一种很棒的编程语言，但是，编写干净的 javascript 代码可能是一个挑战，即使对于经验丰富的程序员也是如此。

编写干净的代码可以提高应用程序的可维护性并提高开发人员的工作效率。但是，一些开发人员不知道可用于进一步增强代码的语言功能。 如何写好javascript？

1. 使用 linter ( ESLint ) 基于预先确定的规则配置，linter 是一种静态代码分析工具，用于查找语法和风格问题。简而言之，它将使您的 Javascript/Typescript 更好，并有助于其一致性。

2. 隔离你的代码 我可以建议保持代码库有条理和易于理解的最关键的事情是将特定的逻辑块（通常是函数）划分为不同的主题。如果您创建一个函数，默认情况下它应该只用于一个目的，而不是同时执行许多任务。

此外，您应该避免引起副作用，这意味着在大多数情况下，您不应该更改在函数之外声明的任何内容。您将数据接收到带有参数的函数中；不应访问其他所有内容。如果你想从函数中得到一些东西， return 新的值。

3. 对所有 api 请求和 JSON 方法使用 try catch 从 API 请求数据时，很多事情都可能出错，因此必须考虑这些可能性。在处理 JSON 时不要自动相信你被告知的内容；相反，尝试通过管理潜在的差异来使您的代码更具弹性。 4.在单个对象参数上使用多个参数 声明函数时，我们应该始终使用多个输入参数而不是单个对象输入。这种方法可以帮助开发人员通过查看方法签名轻松了解需要传递的最小参数数量。

此外，由于无需创建对象参数或收集垃圾，它还提高了应用程序性能。

 但是，如果输入参数的数量增加，您应该切换回使用对象参数以避免不必要的代码复杂性。

注意：如果您使用 TypeScript 并且有多个参数，则更容易定义参数的接口以受益于类型检查和自动建议。

5.利用模板字符串 模板字符串将允许您在保留格式的同时将值注入字符串，并且代码比进行字符串算术更易于阅读。

 6.避免硬编码值 这是我经常要求对我审查的 Pull Requests 进行更改的问题。而且是不行的。让我们看一个例子：

 这个数字的含义，它是如何计算的，以及它背后的商业原理，对于那些看过代码的人来说都是未知的。我们可以用以下常量代替它，而不是硬编码这个值：

 7.优先选择多个参数而不是单个对象参数 在声明一个函数时，你应该总是更喜欢多个参数而不是一个需要对象的参数：

 这背后的原因是，当您查看函数声明的第一行时，您确切地知道需要传递给函数的内容。

尽管函数应该只能完成一项任务，但它们可以扩展大小。在函数体中搜索需要传递嵌套在对象内的变量的变量将花费更多时间。尽管使用整个对象并将其提供给方法通常看起来更简单，但此配置将有助于您的应用程序扩展。

在某些情况下，声明特定参数没有意义。对我来说，就是上面四五个函数参数。如果你的函数变得那么大，你应该转向使用对象参数。

这里的主要原因是参数需要以特定的顺序传递。如果您有可选参数，则 需要 传递 undefined 或 null。使用对象参数，您可以简单地传递整个对象，其中顺序和 undefined 值无关紧要。

8. 需要搜索字符串时使用正则表达式 正则表达式是一个强大的字符串解析工具，尽管它具有异国情调的外观，但它允许您创建复杂的模式来处理一系列具有挑战性的字符串匹配情况。 9.利用可选链 停止使用冗长的逻辑连词并使用可选链接简化您的代码。

 10. 使用箭头函数 箭头函数提供了一种编写 JavaScript 函数的简洁方式，同时解决了 this 在回调中访问属性的问题。

如果您使用箭头函数，则花括号、括号、函数和返回关键字成为可选的。最重要的是，您的代码变得更容易理解和更清晰。

下面的示例显示了不带括号的单行箭头函数和常规函数之间的比较。

 尽管箭头函数要简单得多，但我们必须了解何时以及如何使用它们。

例如，在使用对象原型、类或对象字面量时，使用箭头函数并不是最好的方法。

此外，箭头函数不能用作函数构造函数。如果您使用 new 关键字从箭头函数创建新对象，您将收到错误消息。

11.避免嵌套 嵌套是一种使你的代码更复杂、更难阅读和理解的技术。如果它有两个以上的级别，请考虑通过使用根级别的返回条件、更短的块以及将嵌套逻辑抽象为单独的函数来进行改造。

12. 使用模板文字进行字符串连接 模板文字是用反引号 ( `) 分隔的文字。它提供了一种创建多行字符串和执行字符串插值的简单方法。

例如，我们可以在字符串中定义一个占位符来消除所有不必要的连接。

 13. 数据稀缺 先前的建议为我们指明了一个方向：不要分发您不需要的信息。再一次，在配置您的功能时，可能需要一些额外的工作。然而，随着时间的推移，毫无疑问，它会为您带来更清晰易读的代码库。确切地知道在哪里使用了哪些值非常有帮助。

14.使用更漂亮 在团队中工作需要清晰的风格指南和格式。ESLint 提供了一个庞大的规则集，您可以根据自己的需要进行定制。还有 eslint --fix，它纠正了一些错误，但不是全部。

相反，我建议使用 Prettier 来格式化您的代码。这样，开发人员不必担心代码格式，而只需编写高质量的代码。外观将保持一致并且自动格式化。

15. 注释所有非典型代码，但不要让它取代代码可读性 您可能偶尔需要处理没有设置规则的异常情况。如果您评论此代码以帮助阐明它的作用以及正在考虑的上下文，它将对其他程序员非常有帮助，并在您将来返回代码时提醒您自己。但是，这不能作为一开始就没有适当注意编写清晰代码的借口。