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);
}

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


声明规则

简单陈述的一般规则:

  • 始终以分号结束简单的语句。

例子:

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";
}

对象规则

对象定义的一般规则:

  • 将左括号与对象名称放在同一行。

  • 在每个属性及其值之间使用冒号加一个空格。

  • 在字符串值周围使用引号,而不是在数字值周围使用引号。

  • 不要在最后一个属性值对后添加逗号。

  • 将右括号放在新行上,不带 领先的空间。

  • 对象定义始终以分号结束。

例子

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


线长 < 80

为了可读性,避免行长超过 80 人物。

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

例子

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>My Web Page</h2>

<p>The best place to break a code line is after an operator or a comma.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Hello Dolly.";
</script>

</body>
</html>

命名约定

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

  • 变量和函数名称写作camelCase

  • 大写编写的全局变量(我们没有,但它是 相当常见)

  • 大写书写的常量(如 PI)

您应该使用连字符驼峰或 变量名称中的下划线

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

HTML 和 CSS 中的连字符:

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

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

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

下划线:

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

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

帕斯卡命名法:

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

驼峰式命名法:

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

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


在 HTML 中加载 JavaScript

使用简单的语法加载外部脚本(类型属性不是 必要的):

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

访问 HTML 元素

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

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

const obj = getElementById("Demo")

const obj = getElementById("demo")

如果可能,请在 HTML 中使用相同的命名约定(如 JavaScript)。

访问 HTML 样式指南。


文件扩展名

HTML 文件应具有 .html 扩展名(允许 .htm)。 <p>CSS 文件应具有 .css 扩展名。

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


使用小写文件名

大多数 Web 服务器(Apache、Unix)对文件名区分大小写:

london.jpg 无法作为 London.jpg 进行访问。

其他 Web 服务器(Microsoft、IIS)不区分大小写:

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

如果您混合使用大小写,则必须非常小心 持续的。

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

为了避免这些问题,请始终使用小写文件名(如果可能)。


表现

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

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

对于开发中的代码,应该优先考虑可读性。产量较大 脚本应该最小化。