JavaScript 编码风格指南 – JavaScript 完全手册(2018版)

10年服务1亿前端开发工程师

小编推荐:掘金是一个面向程序员的高质量技术社区,从 一线大厂经验分享到前端开发最佳实践,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。

注:本文为 《 JavaScript 完全手册(2018版) 》第6节,你可以查看该手册的完整目录。

JavaScript 编码风格是使用 JavaScript 时使用的约定集合。

编码风格是您和您的团队达成的共识,以保持项目的一致性。

如果您没有团队,则应该和您自己达成共识,始终保持您的代码符合您的标准。

代码编写有固定的格式规则有很大帮助,这样的代码更具可读性,更加便于维护。

流行的编码风格指南

编码风格指南有很多,这里是 JavaScript 社区中最常见的两个:

您可以按照其中一份指南编码,或创建自己的编码风格。

与您所工作的项目保持一致

即使您更喜欢某一份编码风格指南,在处理项目时也应该使用该项目的风格。

GitHub 上的一个开源项目可能遵循一系列规则,您与团队合作的另一个项目可能会遵循完全不同的规则。

Prettier 是一个强大的工具,可以强制执行代码格式化,因此您应该使用它。

本手册中使用的首选项

我们总是使用最新的 ES 版本。 如果需要支持旧的浏览器,请使用 Babel 。

  • 缩进:使用空格而不是制表符,使用 2 个空格缩进。
  • 分号:不要使用分号。
  • 行长:如果可能的话,尝试在 80 个字符处换行。
  • 内联注释:在代码中使用内联注释。 仅将块注释用于文档。
  • 没有死代码:不要留下旧代码注释,以防以后有用。只保留你现在需要的代码,版本控制/你的笔记应用就是为此而设的。
  • 只有在有用的时候才进行注释:不要添加对理解代码没有帮助的注释。如果代码是通过使用良好的变量和函数命名以及 JSDoc 函数注释,那么应该是不言而喻的,不需要添加注释。
  • 变量声明:始终声明变量,避免污染全局对象。 永远不要使用 var 。 默认为 const,只有在重新分配变量时才使用 let
  • 常量:在 CAPS 中声明所有的常量。 使用 _ 分隔 VARIABLE_NAME (变量名)中的单词。
  • 函数:因为 this 工作原理的关系,使用箭头函数,比如在对象方法或构造函数中。除非您有特定的理由使用常规函数。将它们声明为 const,并尽可能使用隐式返回。可以随意使用嵌套函数将助手函数隐藏到其他代码中。
const test = (a, b) => a + b
const another = a => a + 2
  • 命名:函数命名,变量命名和方法命名始终以小写字母开头(除非您将它们标识为私有,后面会详细介绍),并且使用 camelCased(驼峰命名) 。 只有构造函数和类名才应该以大写开始。 如果您使用的框架需要特定约定,请相应地改变您的习惯。 文件名应全部为小写,单词用 - 分隔。
  • 特定于语句的格式和规则

if:始终使用 {}

if (condition) {
  statements
}
if (condition) {
  statements
} else {
  statements
}
if (condition) {
  statements
} else if (condition) {
  statements
} else {
  statements
}

for:始终在 initialization(初始值)中初始化长度以缓存它,不要在条件中插入它。避免使用 for ,除非与 .​​hasOwnProperty() 一起使用。喜欢:

for (initialization; condition; update) {
  statements
}

while

while (condition) {
  statements
}

do

do {
  statements
} while (condition);

switch

switch (expression) {
  case expression:
    statements
  default:
    statements
}

try

try {
  statements
} catch (variable) {
  statements
}
try {
  statements
} catch (variable) {
  statements
} finally {
  statements
}
  • 空格:明智地使用空格来提高可读性:
  • 在关键字之后加一个空格,再后跟一个 ( ;
  • 在二进制操作之前和之后( +-/*&& ..)加一个空格;
  • for 语句之后,在每个 ; 分隔之后加一个空格,开分隔语句的每个部分。
  • 在每 , 之后加一个空格。
  • 空白行(New lines):使用空白行分隔执行逻辑相关操作的代码块。
  • 引号:支持使用单引号 '而不是双引号 " 。双引号是 HTML 标准中的属性,因此使用单引号可以避免在处理 HTML 字符串时需要删除或者转义双引号的问题。在适当时使用模板字面量,而不是变量插值。
赞(4) 打赏
未经允许不得转载:WEB前端开发 » JavaScript 编码风格指南 – JavaScript 完全手册(2018版)

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    沙发来了

    陌上寒2周前 (11-10)Reply

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏