始终对所有 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 人物。
如果 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 库名称发生冲突。
使用简单的语法加载外部脚本(类型属性不是 必要的):
<script src="myscript.js"></script>
使用“不整洁”的 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 进行访问。
如果您混合使用大小写,则必须非常小心 持续的。
如果您从不区分大小写的服务器迁移到区分大小写的服务器,即使很小 错误可能会破坏您的网站。
为了避免这些问题,请始终使用小写文件名(如果可能)。
计算机不使用编码约定。大多数规则都有 对程序的执行影响不大。
缩进和额外空格在小脚本中并不重要。
对于开发中的代码,应该优先考虑可读性。产量较大 脚本应该最小化。