二维码
搜索 ×

JavaScript 风格指南

  • 作者：图形开发学院
  • 更新时间：2023年11月01日
  • 阅读量：0
  • 收藏数：0

JavaScript 风格指南

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

JavaScript 编码约定

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

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

编码约定确保质量：

  • 提高代码可读性
  • 使代码维护更轻松

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

本页介绍使用的常规 JavaScript 代码约定。
您还应该阅读下一章“最佳实践”，并学习如何避免编码陷阱。

变量名称

在 W3schools，我们使用 camelCase 作为标识符名称（变量和函数）。

所有名称都以字母开头。

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

1
2
3
4
5
6
7
firstName = "John";  
lastName = "Doe";  

price = 19.90;  
tax = 0.20;  

fullPrice = price + (price * tax);

操作员周围的空间

始终在运算符 （ = + - * / ） 和逗号后加上空格：

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

代码缩进

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

:函数 
1
2
3
function toCelsius(fahrenheit) {  
  return (5 / 9) * (fahrenheit - 32);  
}

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

语句规则

简单语句的一般规则：

  • 始终以分号结束简单的语句。
1
2
3
4
5
6
7
8
const cars = ["Volvo", "Saab", "Fiat"];  

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

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

  • 将左括号放在第一行的末尾。
  • 在左括号前使用一个空格。
  • 将右括号放在新行上，不带前导空格。
  • 不要用分号结束复杂的语句。
:函数 
1
2
3
function toCelsius(fahrenheit) {  
  return (5 / 9) * (fahrenheit - 32);  
}
:循环 
1
2
3
for (let i = 0; i < 5; i++) {  
  x += i;  
}
:条件 
1
2
3
4
5
if (time < 20) {  
  greeting = "Good day";  
} else {  
  greeting = "Good evening";  
}

对象规则

对象定义的一般规则：

  • 将左括号放在与对象名称相同的行上。
  • 在每个属性及其值之间使用冒号加一个空格。
  • 在字符串值周围使用引号，而不是在数值周围使用引号。
  • 不要在最后一个属性值对后添加逗号。
  • 将右括号放在新行上，不 前导空格。
  • 始终以分号结束对象定义。
1
2
3
4
5
6
const person = {  
  firstName: "John",  
  lastName: "Doe",  
  age: 50,  
  eyeColor: "blue"  
};

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

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

线长 < 80

为了提高可读性，请避免行长于 80 字符。

如果 JavaScript语句不适合一行，则最好中断它位于运算符或逗号之后。

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

命名约定

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

  • 以 camelCase 形式编写的变量和函数名称
  • 用大写字母编写的全局变量（我们没有，但它是 很常见）
  • 以大写形式编写的常量（如 PI）

您应该在变量名称中使用连字符母鸡、骆驼大小写还是under_scores？

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

HTML 和 CSS 中的连字符：

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

CSS 在属性名称 （font-size） 中使用连字符。

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

强调：

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

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

PascalCase：

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

骆驼案例：

camelCase 由 JavaScript 本身、jQuery 和其他 JavaScript 使用 图书馆。

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

在 HTML 中加载 JavaScript

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

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

访问 HTML 元素

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

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

1
2
3
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 访问。

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

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

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

性能

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

缩进和多余空格在小脚本中并不重要。

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

推荐教程