JavaScript 样式指南
始终对所有 JavaScript 项目使用相同的编码规范。
JavaScript 编码规范
编码规范是 **编程的风格指南**。它们通常涵盖
- 变量和函数的命名和声明规则。
- 空格、缩进和注释的使用规则。
- 编程实践和原则。
编码规范 **确保质量**
- 提高代码可读性
- 使代码维护更容易
编码规范可以是团队遵循的文档化规则，也可以只是你个人的编码习惯。
本页描述了 W3Schools 使用的一般 JavaScript 代码规范。
你应该阅读下一章 "最佳实践"，学习如何避免编码陷阱。
变量名
在 W3schools 中，我们使用 **camelCase** 作为标识符名称（变量和函数）。
所有名称都以 **字母** 开头。
在本页底部，你将找到关于命名规则的更广泛的讨论。
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);
}
不要使用制表符（Tab 键）进行缩进。不同的编辑器对制表符的解释不同。
语句规则
简单语句的一般规则
- 始终以分号结尾简单语句。
示例
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 语句不能在一行内写完，最好的换行位置是在运算符或逗号之后。
命名约定
始终对所有代码使用相同的命名约定。例如
- 变量和函数名以 **camelCase** 形式编写
- 全局变量以 **UPPERCASE** 形式编写（我们不这样做，但这很常见）
- 常量（如 PI）以 **UPPERCASE** 形式编写
在变量名中应该使用 **hyp-hens**、**camelCase** 还是 **under_scores**？
这是一个程序员经常讨论的问题。答案取决于你问谁。
HTML 和 CSS 中的连字符
HTML5 属性可以以 data- 开头 (data-quantity, data-price)。
CSS 在属性名中使用连字符 (font-size)。
连字符可能被误认为是减法尝试。JavaScript 名字中不允许使用连字符。
下划线
许多程序员更喜欢使用下划线 (date_of_birth)，特别是在 SQL 数据库中。
下划线通常用于 PHP 文档中。
PascalCase
C 程序员通常更喜欢 PascalCase。
camelCase
camelCase 被 JavaScript 本身、jQuery 和其他 JavaScript 库使用。
不要以 $ 符号开头名称。这会导致你与许多 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** 扩展名（**htm** 是允许的）。
CSS 文件应该具有 **.css** 扩展名。
JavaScript 文件应该具有 **.js** 扩展名。
使用小写文件名
大多数 Web 服务器（Apache、Unix）对文件名区分大小写
london.jpg 无法以 London.jpg 形式访问。
其他 Web 服务器（Microsoft、IIS）不区分大小写
london.jpg 可以以 London.jpg 或 london.jpg 形式访问。
如果你使用大小写混合，则必须非常一致。
如果你从不区分大小写的服务器迁移到区分大小写的服务器，即使是微小的错误也会破坏你的网站。
为了避免这些问题，始终使用小写文件名（如果可能）。
性能
编码约定不被计算机使用。大多数规则对程序执行的影响很小。
缩进和额外的空格在小型脚本中并不重要。
对于开发中的代码，应该优先考虑可读性。较大的生产脚本应该最小化。
