JavaScript 编码规范详解：从嵌入、缩进到命名与声明

JavaScript 嵌入与代码组织

1.嵌入规则

JavaScript 代码应优先存放于独立的 .js 文件中，并通过 <script src="filename.js"> 标签在页面中引入。若非页面专用代码，应避免直接在 HTML 页面中编写 JavaScript。

2.对齐缩进与换行

缩进与换行规范

a) 缩进

同一系统内需统一缩进标准，本文推荐缩进宽度为 4 个空格。由于不同编辑器对 Tab 键的处理存在差异，建议将开发环境中的 Tab 快捷键配置为插入 4 个空格。若编辑器不支持此功能，应手动按 4 次空格进行缩进。

b) 换行

以下场景必须执行换行操作：

每条独立语句结束处；

if、else、catch、finally、while 等关键字前；

运算符换行时，运算符必须置于新行的行首。

若因单行长度超限需换行，请参考行长度策略进行分割。

1).字符串过长截断

每行代码长度应控制在 80 个字符以内。若代码较长，应尽量换行，且换行点应选在操作符和标点符号之后，优先选择分号“;”或逗号“,”之后。下一行代码需相对上一行缩进 4 个空格。此举可有效防止因复制粘贴导致的代码缺失，并增强代码可读性。

按特定长度截断字符串，并使用 + 运算符进行连接。分隔字符串时应尽量遵循语义，避免在完整名词中间断开。特别地，对于 HTML 片段的拼接，应通过缩进保持与 HTML 相同的结构：

也可使用数组进行拼接，这种方式相对 + 运算更易于调整缩进：

2).三元运算符过长

三元运算符包含 3 个部分，因此其换行方式应根据各部分长度不同，形成 3 种不同的情况：

严禁出现以下情况：

3).过长的逻辑条件组合

当复杂的逻辑条件组合导致 80 字符限制无法满足时，应将每个条件独立一行，逻辑运算符置于行首进行分隔，或将部分逻辑按逻辑组合进行分隔。最终将右括号)与左大括号{放在独立一行，以确保与 if 语句块在视觉上易于辨识。例如：

4).过长的JSON和数组

若对象属性较多导致每行一个属性占用空间过大，可按语义或逻辑进行分组组织，例如：

通过 5 个一组的分组方式，将每一行控制在合理范围内，并按逻辑进行切分。对于项目较多的数组，也可采用相同方法，例如：

5).return语句

若 return 使用表达式执行作为返回值，请将表达式与 return 关键字置于同一行，以免换行符被误解析为语句结束而导致返回错误。若 return 关键字后无返回表达式，则返回 undefined。构造器的默认返回值为 this。

示例：

命名约定与语义

3.命名

常见的命名方法包括以下几类：

a).命名法说明

1).camel命名法，形如thisIsAnApple

2).pascal命名法，形如ThisIsAnApple

3).下划线命名法，形如this_is_an_apple ·

4).中划线命名法，形如this-is-an-apple

根据不同类型的内容，必须严格采用如下命名法：

b).变量名：必须使用camel命名法

c).参数名：必须使用camel命名法

d).函数名：必须使用camel命名法

e).方法/属性：必须使用camel命名法

f).私有（保护）成员：必须以下划线_开头

g).常量名：必须使用全部大写的下划线命名法，如IS_DEBUG_ENABLED

h).类名：必须使用pascal命名法

i).枚举名：必须使用pascal命名法

j).枚举的属性：必须使用全部大写的下划线命名法

k).命名空间：必须使用camel命名法

l).语义：命名同时还需要关注语义，例如：

变量名应当使用名词；

boolean类型的应当使用is、has等起头，表示其类型；·

函数名应当用动宾短语；

类名应当用名词。

注释与声明规范

4.注释

注释应尽可能简洁、清晰明了，着重解释含义，对不直观的部分进行注解：

（当然这种直接定义一堆全局变量的做法不推荐）

此外，JavaScript 的注释有“//”和“/* .... */”两种形式。建议“//”用于代码行注释，“/* .... */”形式用于整个代码段的注销，或用于较正式的声明中，如函数参数、功能、文件功能等的描述：

另：复制粘贴时应注意注释是否与代码对应。

5.声明

1).变量的声明

尽管 JavaScript 语言不强制要求在变量使用前先声明变量，但我们仍应养成此习惯。这有助于检测未声明的变量，避免其变为隐藏的全局变量，从而消除隐患。

在函数开始处应先用 var 关键字声明函数中使用的局部变量，并注释变量的功能及含义，且变量应按字母顺序排序。每个变量单独占一行，以便添加注释。这是因为 JavaScript 中仅函数的 {} 表示作用域，用 var 关键字声明的局部变量仅在函数内有效，而未用 var 声明的变量则被视为全局变量。示例：

用 var 声明过的变量 valueA 和没有声明的变量 valueB 是有区别的。特别需要注意的是，在函数内部用 var 声明的变量为局部变量，这样可以有效地避免因局部变量和全局变量同名而产生的错误。

2).函数的声明

函数也应在调用前进行声明，内部函数应在 var 声明内部变量的语句之后声明，以清晰表明内部变量和内部函数的作用域。

此外，函数名紧接左括号'('之间，而右括号')'和后面的'{'之间要有个空格，以清楚地显示函数名及其参数部分，和函数体的开始。若函数为匿名 / 无名函数，则 function 关键字和左括号'('之间要留空格，否则可能误认为该函数的函数名为 function。

内部函数声明示例：

从上例的输出可以看出，inF() 函数仅在 outF() 函数的内部生效，局部变量 innerA 对内部函数的作用域生效。这样的编码方式使得变量和函数的作用域变得清晰。