浅谈JavaScript编程语言的编码规范

答案：JavaScript 编程语言作为最流行的客户端脚本语言，早已被众多 Web 开发人员所熟悉。随着 Web2.0 时代的到来和 Ajax 技术的广泛应用，JavaScript 也逐渐吸引着更多的视线。工作中要求越多的是对 JavaScript 语言的深入学习，灵活运用，和对编码质量的保证。 

对于熟悉 C/C++ 或 Java 语言的工程师来说，JavaScript 显得灵活，简单易懂，对代码的格式的要求也相对松散。很容易学习，并运用到自己的代码中。也正因为这样，JavaScript 的编码规范也往往被轻视，开发过程中修修补补，最终也就演变成为后续维护人员的恶梦。软件存在的长期价值直接与编码的质量成比例。编码规范能帮助我们降低编程中不必要的麻烦。而 JavaScript 代码是直接发送给客户浏览器的，直接与客户见面，编码的质量更应该受到关注。 

本文浅谈 JavaScript 编程中关于编码规范的问题，分析其中缘由。希望引起更多 Web 开发人员对 JavaScript 编码规范问题的关注和对软件产品质量问题的重视。 

前言 

提及 C/C++ 和 Java 编码规范，相信许多工程师并不生疏。但说到 JavaScript 语言的编码规范，也许您会忍俊不禁。JavaScript 不是语法很灵活吗?变量随时用随时可以声明;语句结束符可以不要;字符串和数字也可以相加;参数多一个少一个也不会报错。没错，当您从 C/C++ 和 Java 严格的语法规定之下，转向 JavaScript 语言，会觉得自由了很多，轻松了很多。语法松散是 JavaScript 重要的特征。它灵活易懂，给开发人员带来了很多方便，但如果编写过程中不注意，代码的调试成本和维护成本则会无形地增加。 

JavaScript 编码会随应被直接发送到客户端的浏览器，代码规范不只是代码质量的保证，也影响到产品的长期信誉。希望 JavaScript 编程语言的规范问题也能同样引起更多朋友的关注。 

JavaScript 编码规范建议 

本文就 JavaScript 编码过程中涉及的排版、命名、声明、作用域、及一些特殊符号的使用等方面，根据个人在学习工作中的总结，给出自己的一些建议，并分析其中缘由，以供参考。 

JavaScript 文件引用 

JavaScript 程序应该尽量放在 .js 的文件中，需要调用的时候在 HTML 中以 <　script src="filename.js"> 的形式包含进来。JavaScript 代码若不是该 HTML 文件所专用的，则应尽量避免在 HTML 文件中直接编写 JavaScript 代码。因为这样会大大增加 HTML 文件的大小，无益于代码的压缩和缓存的使用。 

另外，<script src="filename.js"> 标签应尽量放在文件的后面。这样会降低因加载 JavaScript 代码而影响页面中其它组件的加载时间。 

代码排版 

行长度 

每行代码应小于 80 个字符。如果代码较长，应尽量选择换行，下一行代码应缩进 8 个空格。这样可以使代码排版整齐，减轻阅读代码的疲劳感。换行缩进 8 个空格可以和代码段的缩进 4 个空格区分开，以增强代码的可阅读性。 

行结束 

JavaScript 语句应该以分号结束。但大多数浏览器允许不写分号，只要在本应是分号的地方有一个换行符就行。但是如果代码行较长需要换行的时候，有哪些注意事项呢?换行应选择在操作符和标点符号之后，最好是在逗号'，'之后，而不要在变量名、字符串、数字、或')' ']' '++' '--'等符号之后换行。 

这样可以有效的防止拷贝、粘贴而引起的错误，并可有效地增强代码的可阅读性。请见清单 1，代码的输出符合我们的期望。但就写法而言，对 valueB 的赋值语句是在变量 valueA 之后进行的换行，这很容易被误解为 valueB=ValueA，给阅读造成障碍。而对 valueC 的复制语句是在'+'之后进行的换行，就容易理解的多。这也是本文所提倡的换行方式。 

清单 1. 行结束的位置 

代码: 
复制代码 代码如下:
 
<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。 

清单 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。 

清单 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 声明内部变量的语句之后声明，可以清晰地表明内部变量和内部函数的作用域。 

此外，函数名紧接左括号

上一个：jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
下一个：修复ie8&chrome下window的resize事件多次执行