JavaScript 风格指南

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

JavaScript 编码约定

编码约定是编程风格指南。它们通常涵盖：

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

编码约定保证质量：

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

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

本页描述了 91xjr 使用的一般 JavaScript 代码约定。
您还应该阅读下一章"Best Practices"，并了解如何避免编码陷阱。

变量名称

在 W3schools，我们使用骆驼香烟盒用于标识符名称（变量和函数）。

所有名称均以 a 开头信。

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

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

price = 19.90;
tax = 0.20;

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

为了便于阅读，请避免行长超过 80 个字符。

如果 JavaScript 语句无法容纳在一行中，那么最好的中断位置是在运算符或逗号之后。

示例

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

亲自试一试 »

命名约定

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

变量和函数名称写为骆驼香烟盒
全局变量写入大写（我们没有，但这很常见）
常量（如 PI）写入大写

你应该使用连字符,骆驼香烟盒，或者下划线在变量名中？

这是程序员经常讨论的问题。答案取决于你问的是谁：

HTML 和 CSS 中的连字符：

HTML5 属性可以以 data- 开头（数据数量、数据价格）。

CSS 在属性名称（字体大小）中使用连字符。

连字符可能会被误认为是减法尝试。 JavaScript 名称中不允许使用连字符。

下划线：

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

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

帕斯卡情况：

PascalCase 通常是 C 程序员的首选。

骆驼香烟盒：

CamelCase 由 JavaScript 本身、jQuery 和其他 JavaScript 库使用。

名称不要以 $ 符号开头。它会让你与许多 JavaScript 库名称发生冲突。

在 HTML 中加载 JavaScript

使用简单的语法加载外部脚本（类型属性不是必需的）：

访问 HTML 元素

使用 "untidy" 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 进行访问。

其他 Web 服务器（Microsoft、IIS）不区分大小写：

london.jpg 可以作为 London.jpg 或 london.jpg 进行访问。

如果混合使用大小写，则必须非常一致。

如果您从不区分大小写的服务器转移到区分大小写的服务器，即使是小错误也可能会破坏您的网站。

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

表现

计算机不使用编码约定。大多数规则对程序的执行影响不大。

缩进和额外空格在小脚本中并不重要。

对于开发中的代码，应该优先考虑可读性。应尽量减少较大的制作脚本。