为什么我使用JavaScript样式指南以及为什么也应该使用

关键要点

• 采用 JavaScript 风格指南（例如 JavaScript Standard Style）有助于减少团队摩擦，提高程序员的幸福感，并确保代码一致性。
• 使用语言（如 JavaScript）的主流风格进行编码，可以更容易地为开源项目做出贡献，并让其他人为您的项目做出贡献。
• 风格指南并不一定能使程序更正确，但它可以在错误发布之前捕获错误，使代码更易于阅读和理解，并防止团队成员之间发生分歧。
• 实现 JavaScript Standard Style 可以无需任何工具，但也有 npm 包可用于 lint JavaScript 代码和文本编辑器插件来帮助强制执行样式。

让我们来看看 @feross 的 JavaScript Standard Style，这是一种越来越流行的 JavaScript 风格指南。它可以帮助您减少团队摩擦并提高程序员的幸福感。

它是一套规则，使 JavaScript 代码更 一致，并且可以防止关于制表符与空格优缺点的无聊讨论。它是您可以采用的众多样式之一，与其他 JavaScript linter（如 JSLint、JSHint 和 ESLint）属于同一类别。

如果您不确定什么是 linter，或者为什么需要 linter，请查看我们对 JavaScript linting 工具的比较。

样式的重要性

如果您已经编写代码一段时间了，您无疑会养成自己喜欢的样式。当您编写数百或数千次特定模式时，就会发生这种情况，您开始发现自己的编码方式在美学上令人愉悦。突然，其他人来了，开始在奇怪的地方放置括号，并在行尾留下空格。可能需要一些文字。深呼吸，您放置括号或选择空格的方式不会使您的程序更正确，这是 个人 偏好。

每种编程语言都有 主流 样式，有时像 Python 那样，官方样式指南被呈现为编写程序的 正确 方法。等等，您说缩进是 4 个空格？

使用语言的主流风格进行编码将有助于您的程序适应语言的生态系统。如果您一开始就熟悉并达成一致，您还会发现更容易为开源项目做出贡献，并让其他人为您的项目做出贡献。

JavaScript 没有官方样式指南，也许 Douglas Crockford 的《优秀部分》中出现了一个事实上的标准。他的书提出了一种编写可靠 JavaScript 程序的方法，他强调了我们应该积极避免的功能。他发布了 JSLint 来支持这些观点，其他 linter 也纷纷效仿。大多数 linter 都是高度可配置的，您可以选择最适合您的样式，更好的是，将其强制执行给他人！JavaScript Standard Style 则有所不同。您最喜欢的样式是 无关紧要的，重要的是选择任何人都可以理解和使用的样式。

采用标准样式意味着将代码清晰度和社区规范的重要性置于个人风格之上。这可能对 100% 的项目和开发文化都没有意义，但是开源对于新手来说可能是一个充满敌意的场所。建立清晰的、自动化的贡献者期望值会使项目更健康。

如果您正在为自己编写一个没有人需要参与贡献的程序，请使用让您最快乐的工具和样式。在团队中工作时，您应该始终尽量减少摩擦，保持专业，不要为小事烦恼。

在引入自己的样式之前，请花时间学习现有代码库的样式。

JavaScript Standard Style

• 2 个空格 - 用于缩进
• 字符串使用单引号 - 除非为了避免转义
• 没有未使用的变量 - 这个可以捕获 大量 错误！
• 没有分号
• 切勿以 (、[ 或 ` 开头
• 关键字后有空格 if (condition) { ... }
• 函数名称后有空格 function name (arg) { ... }
• 始终使用 === 而不是 == - 但允许 obj == null 来检查 null || undefined。
• 始终处理 Node.js err 函数参数
• 始终为浏览器全局变量添加 window 前缀 - 但 document 和 navigator 可以
  • 防止意外使用命名不当的浏览器全局变量，如 open、length、event 和 name。

查看完整的规则列表

最具争议的规则无疑是没有分号。多年来，人们一直认为分号应该 始终 存在以避免错误，Crockford 为了推广这一点做了很多努力，但它也在 C 中有很深的根源，在 C 中，分号是严格要求的，否则程序将无法运行。

JavaScript Standard Style 改变了我对这一点的看法，无分号 JavaScript 很好。

自动分号插入是 JavaScript 的一个 特性，它可以减少噪音并简化程序，我 从未 遇到过由于缺少分号而导致的错误，我不相信您也会遇到。有关此内容的更多信息，请参见 JavaScript 中的分号是否必要？

并非所有人都同意，著名的分支 semistandard 和 happiness 则强烈地恢复了分号。我发现这些分支有点令人遗憾，因为它们似乎错过了标准的全部意义。

我不同意规则 X，您可以更改它吗？

不。标准的重点是避免关于样式的无谓争论。网上有很多关于制表符与空格等的争论，这些争论永远不会解决。这些争论只会分散精力，无法完成工作。最终，您必须“只选择一些东西”，这就是标准的全部理念——它是一堆明智的“只选择一些东西”的观点。希望用户能够看到这一点的价值，而不是捍卫自己的观点。

就我个人而言，我已经习惯了在没有分号的情况下进行编码，也许这是因为我花时间编写 Ruby、Python 和 CoffeeScript，这些语言需要较少的语法。无论原因是什么，当需要查看的内容较少时，我发现程序更清晰。

Mark 的优秀程序等级

程序员应该重视：

1. 正确性
2. 可读性
3. 幸福感
4. 效率

事实证明，采用像 standard 这样的风格指南可以在这些方面都带来好处。

正确性

为了发挥任何作用，程序必须按照您的意图执行并且没有错误。样式不会使程序更正确，但 linter 可以在错误发布之前捕获错误。

可读性

作为一名专业开发人员，除了提供一个有效的程序之外，代码的 可读性 是最重要的事情。与编写相比，阅读和尝试理解程序所花费的精力要多得多，因此请为您的未来自我和其他将继承您的代码的人员进行优化。

清晰可预测的样式使代码更易于阅读和理解。

程序员幸福感

我最喜欢这个方面的一点是，它将重点放在人而不是机器上。它之所以在列表中排名第三，只是因为团队对可读、功能代码的需求应该优先于我们自己的幸福感，但这并不意味着它会以牺牲幸福感为代价。

你想享受生活，不是吗？如果你能快速完成工作，而且工作很有趣，那很好，不是吗？这部分是生活的目的。你的生活更好了。

– 松本行弘

人生苦短，不要因为个人喜好上的意见分歧而烦恼，设定一个标准然后继续前进。如果标准样式可以防止团队成员之间发生分歧和摩擦，那么您会因此而更快乐。

效率

最后一点，但并非最不重要的一点。

如果您必须对这些要点中的任何一个进行权衡，您应该重视正确、可读且使人们快乐的代码 胜过 快速代码。

计算机速度很快。如果程序足够高效，那就没问题。如果您注意到性能不佳，那么 请花时间找到瓶颈并使代码更高效。

人类速度很慢。为我们提高效率更有价值。从采用标准样式中获得的清晰度使您的代码更容易理解和参与贡献。花费在不同意上的时间也大大减少了，这是非常受欢迎的。

实现 JavaScript Standard Style

您可以无需任何工具即可采用标准，只需阅读规则并记下不同的规则即可。试用一周，看看您是否喜欢它。如果您不喜欢，请继续使用它！

还有一个 npm 包用于 lint 您的 JavaScript 代码。

<code>npm install standard --global</code>

运行 standard 将通过 linter 运行目录中的所有 JavaScript 文件。

此外，所有常用编辑器都有文本编辑器插件，以下是如何在 Atom 中安装 linter。

<code>apm install linter
apm install linter-js-standard</code>

就我个人而言，我发现键入时自动 lint 程序非常令人分心。如果您也有同样的感觉，您可能更喜欢在完成工作后使用这些 linter。standard 命令还有一个标志可以自动修复某些样式错误，这可能会节省您的时间。

<code>standard --fix</code>

采用 JavaScript Standard Style

您应该采用标准样式吗？好吧，这完全取决于您。

如果您没有样式指南，那么请准备好应对意见冲突。

如果您已经完善了自己的理想规则集，并且希望在整个代码库中强制执行它，那么 ESLint 可能是您正在搜索的内容。

如果您宁愿不浪费时间在语法这些无聊的细节上，那么请试用 JavaScript Standard Style，并在下面的评论中告诉我们您的想法。

关于 JavaScript 风格指南的常见问题

为什么使用 JavaScript 风格指南很重要？

JavaScript 风格指南是一套标准，开发人员在编写 JavaScript 代码时遵循这些标准。它确保代码的一致性、可读性和可维护性。当多个开发人员在一个项目上工作时，至关重要的是他们都遵循相同的风格指南，以避免混淆并使代码更易于理解和调试。它还有助于减少代码中错误和漏洞的可能性。

如何使用 JavaScript 设置 HTML 元素的样式？

您可以通过访问元素的 style 属性来使用 JavaScript 设置 HTML 元素的样式。例如，如果您有一个 id 为“myElement”的元素，您可以将其背景颜色更改为红色，如下所示： document.getElementById("myElement").style.backgroundColor = "red"; 这会将 CSS 样式直接应用于元素。

开发人员常用的常见 JavaScript 风格指南有哪些？

开发人员使用的一些最常见的 JavaScript 风格指南包括 Airbnb 的 JavaScript 风格指南、Google 的 JavaScript 风格指南和 StandardJS。这些指南为语法、格式和最佳实践提供了规则，以确保代码干净、一致且易于阅读。

如何在我的项目中强制执行 JavaScript 风格指南？

您可以使用像 ESLint 这样的 linter 在您的项目中强制执行 JavaScript 风格指南。linter 是一种工具，它分析您的代码以查找潜在的错误和违反您的风格指南的情况。您可以配置 ESLint 以遵循您选择的风格指南的规则，并且当您的代码违反这些规则时，它会提醒您。

我可以创建自己的 JavaScript 风格指南吗？

是的，您可以创建自己的 JavaScript 风格指南。但是，通常使用社区已经测试和验证的现有风格指南效率更高。如果您有现有风格指南未涵盖的特定需求，您可以创建自己的规则并将其添加到您的 linter 配置中。

JavaScript 中内联样式和外部样式有什么区别？

内联样式使用 style 属性直接应用于 HTML 元素，而外部样式在单独的 CSS 文件中定义并链接到 HTML 文档。虽然内联样式对于小型项目或快速修复非常方便，但对于大型项目，通常更倾向于使用外部样式，因为它们可以提高可重用性和关注点分离。

如何使用 JavaScript 从 HTML 元素中删除样式？

您可以通过将 style 属性设置为空字符串来使用 JavaScript 从 HTML 元素中删除样式。例如，要从 id 为“myElement”的元素中删除背景颜色，您可以执行以下操作： document.getElementById("myElement").style.backgroundColor = ""; 这将从元素中删除内联样式。

使用带有 JavaScript 风格指南的 linter 有什么好处？

使用带有 JavaScript 风格指南的 linter 可以帮助您在错误和不一致成为问题之前捕获它们。它还可以通过强制执行最佳实践和样式规则来帮助您编写更干净、更易于阅读的代码。此外，它还可以通过自动修复某些类型的错误和格式问题来节省您的时间。

如何使用 JavaScript 将多个样式应用于 HTML 元素？

您可以通过设置多个 style 属性来使用 JavaScript 将多个样式应用于 HTML 元素。例如，要设置 id 为“myElement”的元素的背景颜色和字体大小，您可以执行以下操作： var elem = document.getElementById("myElement"); elem.style.backgroundColor = "red"; elem.style.fontSize = "20px"; 这会将两种样式都应用于该元素。

我可以使用 JavaScript 来设置伪元素的样式吗？

不可以，JavaScript 无法直接设置伪元素（如 ::before 和 ::after）的样式。这些是 CSS 规范的一部分，只能使用 CSS 来设置样式。但是，您可以使用 JavaScript 向元素添加或删除类，并且这些类可以在您的 CSS 中具有与伪元素相关的样式。

以上是为什么我使用JavaScript样式指南以及为什么也应该使用的详细内容。更多信息请关注PHP中文网其他相关文章！