JavaScript 编码规范详解：从文件组织到语法细节的最佳实践

JavaScript 编码规范概述

JavaScript 作为目前最主流的客户端脚本语言，已被广大 Web 开发人员广泛使用。随着 Web2.0 时代的到来以及 Ajax 技术的普及，JavaScript 的关注度持续上升。在实际工作中，对 JavaScript 的深入学习、灵活运用以及确保编码质量成为了核心要求。

对于熟悉 C/C++ 或 Java 的开发者而言，JavaScript 显得灵活且易于上手，其代码格式要求相对宽松，因此学习门槛较低。然而，这种灵活性也导致编码规范常被忽视，开发过程中的随意修改往往给后续维护带来巨大困难。软件的生命周期价值与编码质量成正比，规范的编码能减少不必要的开发麻烦。由于 JavaScript 代码直接运行在用户浏览器中，其质量直接影响用户体验，因此更应受到重视。

本文旨在探讨 JavaScript 编程中的编码规范问题，分析其背后的原因，希望以此唤起更多 Web 开发人员对编码规范及软件产品质量的关注。

提到 C/C++ 和 Java 的编码规范，许多工程师并不陌生。但对于 JavaScript 的编码规范，或许有人会觉得好笑：JavaScript 语法不是非常灵活吗？变量可以随时声明；语句结束的分号可以省略；字符串和数字可以直接相加；参数多一个少一个也不会报错。确实，从 C/C++ 和 Java 严格的语法约束转向 JavaScript，会感到更加自由和轻松。语法松散是 JavaScript 的重要特征，它带来了便利，但若编写时不加注意，调试和维护成本将无形中增加。

JavaScript 代码会直接发送到客户端浏览器，因此编码规范不仅是代码质量的保证，也关乎产品的长期信誉。希望 JavaScript 的规范问题能引起更多开发者的重视。

本文将结合个人在学习和工作中的经验，从排版、命名、声明、作用域以及特殊符号使用等方面，对 JavaScript 编码过程中的规范问题提出建议，并分析其原因，供读者参考。

JavaScript 文件引用与组织

JavaScript 程序应尽量放置在独立的 .js 文件中，在 HTML 中通过 <script src="filename.js"> 标签引入。如果 JavaScript 代码并非特定于某个 HTML 文件，应尽量避免在 HTML 文件中直接编写 JS 代码。这样做会增加 HTML 文件的大小，不利于代码压缩和缓存机制的使用。

此外，<script src="filename.js"> 标签应尽量放置在 HTML 文件的末尾。这样可以降低加载 JavaScript 代码对其他页面组件加载时间的阻塞影响。

代码排版与缩进规范

代码排版规范

每行代码长度应控制在 80 个字符以内。如果代码较长，应适当换行，下一行代码应缩进 8 个空格。这种排版方式能使代码整齐，减轻阅读疲劳。换行缩进 8 个空格可以与代码块内部的 4 个空格缩进区分开，从而增强代码的可读性。

JavaScript 语句应以分号结束。尽管大多数浏览器允许省略分号（只要本应是分号的地方有换行符即可），但在代码较长需要换行时，需要注意注意事项。换行应选择在操作符和标点符号之后，最好在逗号 ',' 之后，而不要在变量名、字符串、数字或 ')'、']'、'++'、'--' 等符号之后换行。

这样可以有效防止因拷贝、粘贴操作引起的错误，并显著增强代码的可读性。请参考清单 1，代码输出符合预期。但从写法上看，对 valueB 的赋值语句在变量 valueA 之后换行，容易被误解为 valueB = valueA，造成阅读障碍。而对 valueC 的赋值语句在 '+' 之后换行，则易于理解。这也是本文所提倡的换行方式。

代码示例：

 
<script language="javascript">
var valueA = 1;
var valueB = valueA ///bad
+1;
var valueC = valueB + ///good
valueA;
alert (valueB); //output: valueB=2
alert (valueC);//output: valueC=3
</script>

缩进标准

缩进规范

关于缩进的问题，不仅限于 JavaScript，几乎所有编程语言的编写规范中都会提及。缩进几乎是代码编写规范的第一课，是判断代码可读性的直接因素。

代码缩进的好处不言而喻，但如何缩进并无统一标准。最受欢迎的是使用 TAB 键缩进，也有人喜欢使用 2 个、4 个或 8 个空格进行缩进。这种风格不一的缩进方式同样会给代码阅读带来障碍。

本文提倡使用 4 个空格进行缩进，并在同一产品中采用统一的缩进标准。不支持使用 TAB 键进行缩进。这是因为目前尚无统一标准定义 TAB 键代表的空白大小，有些编辑器解析为 4 个空格，有些则解析为 8 个。因此，使用不同编辑器查看代码可能导致格式混乱。虽然 TAB 键简单易用，但为解决此问题，建议在设置开发环境时，将编辑器中的 TAB 快捷键重新设置为 4 个空格。据了解，Eclipse、Vi、Nodepad++、Editplus、UltraEdit 等流行编辑器均提供此功能。

注释规范

注释规范

代码中的注释非常重要，这毋庸置疑。我们通常强调注释的数量，而忽视了对注释质量的提升。及时添加注释会给后续维护人员带来很大便利。但如果注释不及时更新，或因拷贝、粘贴导致注释错误，则会误导阅读者，反而增加阅读障碍。

除了及时更新注释外，我们还应特别关注注释的内容。注释应尽量简单、清晰明了，避免使用含混晦涩的语言，同时着重注释的意义，对不太直观的部分进行注解。请参考清单 2。

代码示例：

 
<script language="javascript">
//following section is used to initialize golbal variables (good)
var valueA = 0; //initialize valueA to be sero (bad)
var valueB = 1;
... 
//call f1 function after waiting for 50 seconds. (good)
setTimeout (f1,50000); //set timeout to be 20s (copy error)
... 
</script>

这种注释方式在 JavaScript 代码中很常见。"initialize valueA to be sero" 这样的注释有什么用呢？难道阅读程序的工程师从 "var valueA = 0;" 语句中看不出来吗？"set timeout to be 20s" 这条注释，不仅因拷贝、粘贴引起了时间数值的错误，同时也误导了程序员对这条语句的理解。setTimeout() 函数的作用并非设置函数执行的超时时间，而是等待一定时间后执行所调用的函数，这种注释害人匪浅。这样的注释内容宁可删除。

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

标识符命名与声明规范

JavaScript 中的标识符命名规则：

◆ 以字母、下划线 '_' 或美元符号 '$' 开头

◆ 允许名称中包含字母、数字、下划线 '_' 和美元符号 '$'

◆ 区分大小写

变量、参数、成员变量、函数等名称均以小写字母开头，构造器的名称以大写字母开头。以下划线 '_' 开头的变量一般习惯于标识私有/局部成员。而以美元符号 '$' 开头的变量习惯于标识系统相关，比如系统进程等。应避免用下划线 '_' 或美元符号 '$' 来命名标识符，以尽可能降低代码的阅读负担。

变量的声明

尽管 JavaScript 语言不要求在变量使用前先对变量进行声明，但我们仍应养成这个好习惯。这样可以比较容易地检测出那些未经声明的变量，避免其变为隐藏的全局变量，造成隐患。

在函数的开始应先用 var 关键字声明函数中要使用的局部变量，注释变量的功能及代表的含义，且应以字母顺序排序。每个变量单独占一行，以便添加注释。这是因为 JavaScript 中只有函数的 {} 表明作用域，用 var 关键字声明的局部变量只在函数内有效，而未经 var 声明的变量则被视为全局变量。我们来看下清单 3。

代码示例：

 
<script language="javascript">
var valueA = "a";
var valueB = "b";
function f1 () {
var valueA = "c";
alert ("valueA="+valueA); //output: valueA=c
valueB = "d";
alert ("valueB="+valueB); //output: valueB=d
} 
f1 ();
alert ("valueA="+valueA); //output: valueA=a
alert ("valueB="+valueB); //output: valueB=d
</script>

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

函数的声明

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

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

代码示例：

 
<script language="javascript">
var innerA = 1;
function outF () {
var innerA = 2;
function _inF () {
alert ("valueA="+innerA);
} 
_inF ();
} 
outF (); //output: valueA=2
_inF (); //error: innerF is not defined
</script>

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

语句结构与特殊符号使用

对于简单语句而言，需要提及的仍然是分号的必要性，同时，一行最多有一个语句。如果一个赋值语句是用函数和对象来赋值，可能需要跨多行，一定切记要在赋值语句末加上分号。

这是因为 JavaScript 中，所有表达式都可以当语句，遇换行符时会解析为表达式的结束，此时不规范的换行和分号的丢失，可能引入新的错误。

对于复合语句，if, for, while, do, switch, try … catch 等代码体，函数定义的函数体，对象的定义等都需要放在花括号 '{}' 里面。

◆ '{' 应在行末，标志代码块的开始。

◆ '}' 应在一行开头，标志代码块的结束，同时需要和 '{' 所在行的开始对齐，以表明一个完整的复合语句段。这样可以极大地提高代码的可阅读性，控制逻辑能清晰地表现出来。

◆ 被包含的代码段应该再缩进 4 个空格。

◆ 即使被包含的代码段只有一句，也应该用花括号 '{}' 包含。尽管不用花括号代码也不会错，但如若需要增加语句的话，则较容易因花括号遗漏而引起的编译错误或逻辑错误。

return 语句在使用时也需慎重，如果用表达式的执行作为返回值，请把表达式和 return 放在同一行中，以免换行符被误解析为语句的结束而引起返回错误。return 关键字后若没有返回表达式，则返回 undefined。构造器的默认返回值为 this。

代码示例：

 
<script language="javascript">
function F1 () {
var valueA = 1;
var valueB = 2;
return valueA + valueB;
} 
function F2 () {
var valueA = 1;
var valueB = 2;
return
valueA + valueB;
} 
alert ( F1() ); //output: 3
alert ( F2() ); //ouput: undefined
</script>

在清单 5 中显示了因返回表达式没有和 return 关键字放在同一行而引起的返回错误，需重视。

适当的空白行可以大大提高代码的可阅读性，可以使代码逻辑更清晰易懂。同时，在表达式中适当的留空白，也会给代码的阅读带来方便。

关键字的后面如有括号，则最好在关键字和左括号 '(' 之间留空白，如 for, if, while 等。而函数名和括号之间则不宜留空白，但若是匿名函数，则必须在 function 和左括号 '(' 之间留空白，否则，编辑器会误认为函数名为 function。

在表达式中，二元运算符（除左括号 '('、左方括号 '['、作用域点 '.'）和两个操作数之间最好留空白。一元运算符（若不是词 typeof 等）和其操作数之间不宜留空白。

逗号 ',' 的后面需要留空白，以显示明确的参数间隔、变量间隔等。

分号 ';' 之后通常表明表达语句的结束，而应空行。在 for 的条件语句中，分号之后则应该留空白。

{} 和 [] 的使用

{} 和 [] 的使用

在 JavaScript 中，如需定义空对象和空数组，通常很自然地想到用 new Object() 和 new Array() 的方法。其实花括号 '{}' 和方括号 '[]' 可以直接用来定义一个空对象和一个空数组。这种书写方法可以使代码看起来简单易懂。

== 和 === 的比较

== 和 === 的比较

判断 "逻辑等" 在代码里是太平常不过的事情，但 JavaScript 与其他熟知的编程语言不同的是，除了可以使用两个等号 '==' 来作判断以外，还可以使用三个等号 '===' 来进行逻辑等判断。两者的不同是 '==' 作逻辑等判断时，会先进行类型转换后再进行比较。'===' 则不会。因而，'==' 进行的判断结果可能产生偏差。'!=' 与 '!==' 的区别亦是如此。本文提倡尽量使用 '===' 来进行逻辑等的判断，用 '!==' 进行逻辑不等的判断。

代码示例：

 
<script language="javascript">
var valueA = "1";
var valueB = 1;
if ( valueA == valueB) {
alert ("Equal");
} 
} else {
alert ("Not equal")
} 
//output: "Equal"
if ( valueA === valueB) {
alert ("Equal");
} 
} else {
alert ("Not equal")
} 
//output: "Not equal"
</script>

清单 6 中，valueA 和 valueB 两个变量的值显然是不相等的，起码 valueA 是个字符串，而 valueB 是一个数字。但用 '==' 进行判断时，程序却输出相等的字样。这是因为编译器对两个变量进行比较时，因为他们的类型不同，而自动地将 valueB 转换成字符串，而后再和 valueA 进行比较的。用 '===' 得到的判断结果正和预期的结果相符。

加号 + 的巧用

加号 '+' 也同样是程序员所熟知的操作符之一。JavaScript 和其他编程语言不同的是，在 JavaScript 中，'+' 除了表示数字值相加、字符串相连接以外，还可以作一元运算符用，把字符串转换为数字。因而如果使用不当，则可能与自增符 '++' 混淆而引起计算错误。这一点，在清单 7 中可以清楚地看出。

代码示例：

 
<script language="javascript">
var valueA = 20;
var valueB = "10";
alert ( valueA + valueB); //ouput: 2010
alert ( valueA + (+valueB)); //output: 30
alert ( valueA + +valueB); //output:30
alert ( valueA ++valueB); //Compile error
</script>

总结

本文就 JavaScript 代码的排版、命名、声明、语句和一些特殊字符的使用等方面，谈了自己对 JavaScript 编程规范的建议。此外，还有许多方面需要深入了解研究，如 with, eval 语句和 this 对象的使用等等。我们在认识其普遍性的同时也需要注意其特殊性，在编写代码时多用心留意，以创造更多更优质的程序代码。