JavaScript 编码规范

请始终为您所有的 JavaScript 项目使用相同的编码规范。


JavaScript 编码规范

编码规范指的是编程的样式指导方针。这些原则大体上包括:

  • 变量和函数的命名和声明规则
  • 使用空格、缩进和注释的规则
  • 编程习惯和准则

编码规范约定确保质量

  • 改善代码可读性
  • 提升代码可维护性

编码规范可以是团队遵守的成文规则,也可以是您个人的编码习惯。

本页介绍 本站 使用的通用 JavaScript 编码规范。


变量名

在 本站,我们对标识符名称(变量和函数)使用了驼峰式大小写

所有名称以字母开头。

在本页的底部,我们会更广泛地讨论命名规则。

  1. firstName = "埃隆";
  2. lastName = "马斯克";
  3. price = 19.90;
  4. tax = 0.20;
  5. fullPrice = price + (price * tax);

运算符周围的空格

请始终在运算符( = + - * / )周围以及逗号之后添加空格:

  1. var x = y + z;
  2. var values = ["奔驰", "宝马", "保时捷"];

代码缩进

请始终使用对代码块缩进使用 4 个空格:

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

请不要对缩进使用制表符。不同的编辑器对 tab 的解释也不尽相同。


语句规则

简单语句的通用规则,请始终以分号结束单条语句:

  1. var values = ["奔驰", "宝马", "保时捷"];
  2. var person = {
  3. firstName: "埃隆",
  4. lastName: "马斯克",
  5. age: 50,
  6. eyeColor: "蓝色"
  7. };

针对复杂语句(compound)的通用规则:请在第一行的结尾处写开括号请在开括号前使用一个空格请在新行上写闭括号,不带前导空格请不要以分号来结束复杂语句

函数:
  1. function toCelsius(fahrenheit) {
  2. return (5 / 9) * (fahrenheit - 32);
  3. }
循环:
  1. for (i = 0; i < 5; i++) {
  2. x += i;
  3. }
条件:
  1. if (time < 20) {
  2. greeting = "Good day";
  3. } else {
  4. greeting = "Good evening";
  5. }

对象规则

针对对象定义的通用规则:

  • 把开括号与对象名放在同一行
  • 在每个属性与其值之间使用冒号加一个空格
  • 不要在最后一个属性值对后面写逗号
  • 请在新行上写闭括号,不带前导空格
  • 请始终以分号结束对象定义
  1. var person = {
  2. firstName: "埃隆",
  3. lastName: "马斯克",
  4. age: 50,
  5. eyeColor: "蓝色"
  6. };

可以对短对象在一行中进行压缩,只在属性之间使用空格,就像这样:

  1. var person = {firstName:"埃隆", lastName:"马斯克", age:50, eyeColor:"蓝色"};

行长度小于 80

为了提高可读性,请避免每行的长度超过 80 个字符。

如果 JavaScript 语句超过一行的长度,换行的最佳位置是运算符或逗号之后。

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>我的网页</h2>
  5. <p>代码行换行的最佳位置是在运算符或逗号之后。</p>
  6. <p id="demo">
  7. <script>
  8. document.getElementById("demo").innerHTML =
  9. "Hello Dolly.";
  10. </script>
  11. </body>
  12. </html>

命名规范

请始终对您所有的代码使用相同的命名规范。例如:

  • 变量和函数名以驼峰大小写来写
  • 全局变量使用大写(我们不这样做,但是相当普遍)
  • 常量(比如 PI)使用大写

我们是否应在变量名中使用连字符驼峰大小写下划线吗?

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

HTML 和 CSS 中的连字符:

HTML5 属性能够以 data- 开头(data-quantity, data-price)。

CSS 在 property-names 中使用连字符(font-size)。

Hyphens 可被错误地视为减法运算符。JavaScript 命名不允许使用连字符。

下划线:

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

下划线经常被用在 PHP 参考资料中。

帕斯卡命名法(PascalCase):

C 语言程序员经常使用帕斯卡命名法。

驼峰大小写(camelCase):

JavaScript 本身、jQuery 以及其他 JavaScript 库使用驼峰大小写。

JavaScript 命名请不要以 $ 符号开头。此举会引起 JavaScript 库名称冲突。


在 HTML 中加载 JavaScript

使用简单的语法来加载外部脚本(type 属性不是必需的):

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

访问 HTML 元素

使用“不整洁的” HTML 样式的后果,也许是导致 JavaScript 错误。这两条 JavaScript 语句会产生不同的结果:

  1. var obj = getElementById("Demo")
  2. var obj = getElementById("demo")

如果可能,请在 HTML 中使用相同的命名规则(就像 JavaScript 那样)。


文件扩展名

HTML 文件应该使用 .html 扩展名(而非 .htm)。

CSS 文件应该使用 .css 扩展名。

JavaScript 文件应该使用 .js 扩展名。


使用小写文件名

大多数 web 服务器(Apache、Unix)对文件名的区分大小写:london.jpg 无法以 London.jpg 进行访问。

其他 web 服务器(微软的 IIS)不区分大小写:london.jpg 能够以 London.jpg 或 london.jpg 来访问。

如果您混合使用大小写,则必须严格保持连续和一致。

如果您将站点从不区分大小写的服务器转移至对区分大小写的服务器,即使这种小错误也可能影响您的网站。

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


性能

计算机不会使用代码规范。大部分规则对程序的执行影响很小。

缩进和额外的空格对小段脚本并不重要。

对于开发中的脚本,应该优先考虑可读性。应该缩小体积较大的脚本。