JavaScript编码规范

 

    对于熟悉C/C++或Java语言的工程师来说，JavaScript显得灵活，简单易懂，对代码的格式的要求也相对松散。很容易学习，并运用到自己的代码中。也正因为这样，JavaScript的编码规范也往往被轻视，开发过程中修修补补，最终也就演变成为后续维护人员的恶梦。软件存在的长期价值直接与编码的质量成比例。编码规范能帮助我们降低编程中不必要的麻烦。而 JavaScript 代码是直接发送给客户浏览器的，直接与客户见面，编码的质量更应该受到关注。
    JavaScript语法过于灵活：变量随时用随时可以声明；语句结束符可以不要；字符串和数字也可以相加；参数多一个少一个也不会报错。语法松散是 JavaScript 重要的特征。它灵活易懂，给开发人员带来了很多方便，但如果编写过程中不注意，代码的调试成本和维护成本则会无形地增加。JavaScript编码会随应被直接发送到客户端的浏览器，代码规范不只是代码质量的保证，也影响到产品的长期信誉。

以下总结了一些JavaScript编码规范以供参考:

1)JavaScript文件引用
  ①JavaScript程序应该尽量放在 .js 的文件中，需要调用的时候在HTML中以<script type="text/javascript" src="filename.js">的形式包含进来。应尽量避免在HTML文件中直接编写JavaScript代码，因为这样会大大增加HTML文件的大小，无益于代码的压缩和缓存的使用。
  ②<script src="filename.js"> 标签应尽量放在文件的后面以防止因加载JavaScript代码而影响页面中其它组件的加载时间。

2)代码排版
  ①缩进
  提倡用4个空格来进行缩进，并在同一产品中采用同一种缩进标准。建议在设置开发环境时，将编辑器里的TAB快捷键重新设置为4个空格。Eclipse,Vi,Nodepad++,Editplus,UltraEdit等流行的编辑器，均提供了此功能。
  ②行长度
  每行代码应小于80个字符
  代码较长需要换行时，下一行代码缩进8个空格
  ③行结束
  语句应以分号结束 (包括变量声明，函数声明，函数调用等任何语句) 如:

[javascript] view plaincopy

1. var demo;  
2. var demoFn = function(){  
3.     //TODO  
4. };  
5. demoFn();  

  换行应选择在操作符和标点符号之后，最好在逗号','之后；不要在变量名、字符串、数字、或')' ']' '++' '--'等符号之后换行。

  ④注释

  注释要尽量简单、清晰明了，避免使用含混晦涩的语言，在关键点注释，不做无用注释 ，更不做错误注释 如:

[javascript] view plaincopy

1. var demo = 0;  //将demo初始化为0   ---> 无用注释  
2. var Demo = {  
3.     align: 'center',  //居中对齐     ---> 无用注释  
4.     //Others...  
5. };  
6. var flag;    //下单标识   ---> 不详尽的注释  

  以上前两个注释完全没必要，第三个注释应写明标识的具体含义。尽管上面的例子看似可笑，但在实际项目中却屡见不鲜。

  推荐的注释格式如下:

[javascript] view plaincopy

1. /*! 
2.  * js文件的题头注释 
3.  * 用来说明当前js文件属于哪个页面，主要功能是什么 
4.  * @author zhq 
5.  * @date 2013-01-14 
6.  */  
7. /** 
8.  * 函数功能注释 
9.  * 用来说明当前函数的功能 
10. 10.  * @method demo 
11. 11.  * @parameter  (number)  id XXX 
12. 12.  *             (string)name XXX 
13. 13.  * @return (Object) Person XXXX 
14. 14.  */  

15. /* 

1. 16.  * 代码块的注释 
2. 17.  */  

18. //代码行的注释  

 

3)标识符命名

  ①变量

  普通变量、成员变量以小写字母开头，私有变量、局部变量以 _ 开头，系统相关变量以 $ 开头 如:

[javascript] view plaincopy

1. function Demo(){  
2.     var _d = 'Private';   //私有变量  
3.     this.attr = 'Test';  
4.     this.fns = function(){  
5.         var demoA = 'A',  //成员变量  
6.             demoB = 'B',  //字符串推荐用单引号  
7.             demoC;  
8.         var demoFn = function(){  //函数推荐以Fn为后缀  
9.             var demoA = 'a';  
10. 10.             alert(demoA);   //显示  a  
11. 11.             alert(demoB);   //显示  undefined  
12. 12.             var demoB = 'b';  
13. 13.             alert(demoB);   //显示  b  
14. 14.             demoC = 'c';  
15. 15.             alert(demoC);   //显示  c  
16. 16.         };  
17. 17.         demoFn();  
18. 18.         alert(demoA);   //显示 A  
19. 19.         alert(demoB);   //显示 B  
20. 20.         alert(demoC);   //显示 c (小写)  
21. 21.         alert(_d);  
22. 22.     }  

23. };  

24. var test = new Demo();  

25. alert(test.attr);  

26. test.fns();  

  JavaScript遵从词法作用域，但同时又仅有函数作用域，所以必须有效防止变量污染。你知道上例中11行的输出结果是为什么吗？ 很多教材有这方面的指导，不再赘述。

  变量应该总是先声明后使用

  ②函数

  1.内部函数应该总以直接量的形式声明，并以 _ 为首字母命名变量 。 如上例的 _demoFn

  2.函数名紧接左括号'('之间，若函数为匿名函数，则function关键字和左括号'('之间要留空格(此条很重要)

  3.用来模拟对象或构造器时，变量名推荐大写字母开头

  ③语句块

  { 应在行末，标志代码块的开始。
  } 应在一行开头，标志代码块的结束，同时需要和'{'所在行的开始对齐
  被包含的代码段应该再缩进 4 个空格

  被包含的代码段只有一句，也应该用花括号'{}'包含

  return语句中return关键字总是与表达式同行

[javascript] view plaincopy

1. function demoFn(){  
2.     var i,len;   //变量的声明应该总是在当前作用域的最顶端，你应该像写C语言一样写它  
3.     for(i=0,len=arguments.length; i<len; ++i){  
4.         //TODO  
5.     }  
6.     return 'Just a test!';  
7. };  

 

4)特殊符号

  ①空白

  1.关键字的后面如有括号，建议在关键字和左括号'('之间留空白(相对不重要)

  2.普通函数的函数名和括号之间不留空白

  3.匿名函数必须在function和左括号'('之间留空白

  4.二元运算符的两个操作数之间留空白(除左括号'('，左方括号'['，作用域点'.')

  5.一元运算符和操作数之间不留空白(除 typeof 等运算符)

  6.逗号','的后面留空白

  7.在 for 的条件语句中，分号之后留空白

  ②以直接量代替构造

  尽量使用如下方式声明数组和对象

[javascript] view plaincopy

1. //推荐使用直接量方式  
2. var arrayA = [];  
3. var ObjectA = {};  
4. var functionA = function(x,y){  
5.   return x+y;  
6. };  
7. //用以代替以下方式  
8. var arrayB = new Array();  
9. var ObjectB = new Object();  

10. var functionB = new Function('x','y','return x+y');  

  ③以等同代替等于

  在做逻辑等判断是，尽量使用等同代替等于符号

[javascript] view plaincopy

1. var a = '1';  
2. var b = 1;  
3. alert(a==b);   //true  
4. alert(a===b);  //false  

 

  上例中，如果true正是你期待的结果，除非你有特别把握，否则我建议你自己做类型转换再用 === 做对比

[javascript] view plaincopy

1. var a = '1';  
2. var b = 1;  
3. alert(a-0 === b);  //字符串转数字的技巧中，推荐使用 -0 操作而非 + 操作  

  ④关于 + 操作

  JavaScript中 + 操作很特殊，除非你对他的语法烂熟于心，并且清晰的了解各个浏览器的解释方式，否则，我建议你在任何你怀疑的地方加个括号

[javascript] view plaincopy

1. var valueA = 20;   
2. var valueB = "10";   
3. alert( valueA + valueB);     // 2010   
4. alert( valueA + (+valueB));  // 30  
5. alert( valueA + +valueB);    // 30  
6. alert( valueA ++valueB);     // Error!!