JavaScript 风格指南

JavaScript 风格指南描述了代码风格和编码约定，好的的编码风格提高代码的可读性和可维护性。。

始终对所有 JavaScript 项目使用相同的编码约定。

编码约定是编程的风格指南。它们通常包括：

  • 变量和函数的命名和声明规则。
  • 空格、缩进和注释的使用规则。
  • 编程实践和原则

好的编码约定有助于提高代码质量：

  • 提高代码可读性
  • 让代码维护更简单

编码约定可以是团队遵循的记录规则，也可以只是您的个人编码实践。

此页面描述了常用的 JavaScript 代码约定，你可以根据自己的实际情况做出调整。 您还应该阅读下一章“最佳实践”，并了解如何避免编码陷阱。

变量名

使用驼峰命名法作为标识符名称（变量和函数）。

所有名称都以字母开头。

在本页底部，您将找到有关命名规则的更广泛的讨论。

firstName = "John";
lastName = "Doe";

price = 19.9;
tax = 0.2;

fullPrice = price + price * tax;

运算符周围的空间

始终在运算符 ( = + - * / ) 和逗号之后放置空格：

let x = y + z;
const myArray = ["Volvo", "Saab", "Fiat"];

代码缩进

始终使用 2 个空格来缩进代码块：

function toCelsius(fahrenheit) {
  return (5 / 9) * (fahrenheit - 32);
}

不要使用制表符（制表符）进行缩进。不同的编辑器对制表符的解释不同。

声明规则

简单语句的一般规则：总是以分号结束简单的语句。

const cars = ["Volvo", "Saab", "Fiat"];

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue",
};

复杂（复合）语句的一般规则：

  • 将左括号放在第一行的末尾。
  • 在左括号前使用一个空格。
  • 将右括号放在一个新行上，没有前导空格。

函数

function toCelsius(fahrenheit) {
  return (5 / 9) * (fahrenheit - 32);
}

循环

for (let i = 0; i < 5; i++) {
  x += i;
}

条件判断

if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

对象规则

对象定义的一般规则：

  • 将左括号与对象名称放在同一行。
  • 在每个属性与其值之间使用冒号加一个空格。
  • 在字符串值周围使用引号。
  • 将右括号放在一个新行上，没有前导空格。
  • 始终以分号结束对象定义。
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue",
};

可以在一行上压缩短对象，仅在属性之间使用空格，如下所示：

const person = { firstName: "John", lastName: "Doe", age: 50, eyeColor: "blue" };

每行长度

为了可读性，避免超过 80 个字符的行。

如果 JavaScript 语句不能放在一行中，最好将它打断的地方是在运算符或逗号之后。

document.getElementById("demo").innerHTML = "Hello Dolly.";

命名约定

始终对所有代码使用相同的命名约定。例如：

  • 以驼峰命名的变量名和函数名
  • 大写的全局变量
  • 大写的常量（如 PI）

在名称中使用中划线、下划线还是驼峰表示？

这是程序员经常讨论的问题。这取决于用在哪里。

HTML 和 CSS 中的中划线：

HTML5 属性可以以 data-（data-quantity, data-price）开头。

CSS 在属性名称（font-size）中使用中划线。

JavaScript 变量名、函数名中不允许使用中划线。

下划线：

许多程序员更喜欢使用下划线 (date_of_birth)，尤其是在 SQL 数据库中。

PHP 文档中经常使用下划线。

大驼峰：

大驼峰拼写法通常是 C 程序员的首选。

小驼峰：

小驼峰拼写法一般 Java， JavaScript 语言的首选。

在 HTML 中加载 JavaScript

使用简单的语法加载外部脚本（不需要 type 属性）：

<script src="myscript.js"></script>

访问 HTML 元素

使用“不整洁”的 HTML 样式的结果可能会导致 JavaScript 错误。

这两个 JavaScript 语句会产生不同的结果：

const obj = getElementById("Demo");

const obj = getElementById("demo");

如果可能，请在 HTML 中使用相同的命名约定（与 JavaScript 相同）。

访问 HTML 样式指南。

文件扩展名

HTML 文件应具有 .html 扩展名（允许使用 .htm）。

CSS 文件应该有一个 .css 扩展名。

JavaScript 文件应具有 .js 扩展名。

使用小写文件名

大多数 Web 服务器（Apache、Unix）对文件名区分大小写：

london.jpg 不能作为 London.jpg 访问。

为避免这些问题，请始终使用小写文件名（如果可能）。

性能

编码约定主要是为了代码的可读性和可维护性，与程序的性能几乎没有关系。

少量的代码中并不能体现除编码约定的重要性，团队开发和大的脚本文件才能体会到编码约定的重要性。

JavaScript 调试 JavaScript 最佳实践