前端代码标准最佳实践：javascript篇

前言

最近一直重构项目的前端代码，也参考了各种前端代码的最佳实践，目的是让前端的HTML,CSS,Javacript代码更符合标准，有更好的性能，更好的可维护性，尝到了重构后的甜头，也萌生了写这个系列博客的念头。前端代码有其固有的灵活性，这就导致了目前前端代码非常混乱的局面，本系列文章希望能起到抛砖引玉的作用，让更多的人重视前端代码的质量，编写更标准的前端代码。

本系列文章共有三篇，分别讨论HTML,CSS,Javascript，本篇将讨论Javascript。

javascript是灵活性非常高的一种脚本语言，使得用其实现的同样功能有多种多样的写法，那么在项目中如果没有统一的规范，就会造成javascript代码难以维护，随着项目的深入，性能j也越来越差，文件也越来越大。所以尽早制定统一的编码规范是非常必要的，下面是整理的一些javascript规范供大家参考。

（1）编码格式

好的编码格式，不同人有不同的看法，但是在同一个项目中一定要有统一的格式。下面是常用的编码格式：

1，缩进： 不使用tab（\0x09）缩进，以4个空格作为逻辑的缩进。

2，左花括号应该在行的结束，而不应该单独一行。应该一直使用花括号括起逻辑块，即使逻辑只有一行，应该也用花括号括起来，这样提高了代码的可读性。例如：

 

1. for (var i=0; i<100; i++) { 
2.      doSomething(i);  
3. } 
4. if (statement) { 
5.     doSomeThing; 
6. } else { 
7.     doSomeThing; 
8. } 

3，用单引号定义字符串。javascript中可以用单引号或者双引号定义字符串，但是因为习惯于在html中elements的属性值的定义使用双引号，而javascript中又经常包含html代码，所以字符串定义使用单引号也是方便于在字符串内部包含含有双引号的html代码。

 

1. var content = '<span id="spanid">…'; 

4，注释：如果注释不是占有多行，建议使用//，不推荐使用/**/，注释应该单独占用一行，而不是写在和代码相同一行的右边。

5，空格：空格的作用是提高代码的可读性，在函数参数的逗号后面使用一个空格，在操作符前后使用一个空格，

 

1. doSomething(myChar, 0, 1); while (x === y) 

6，分号：语句结束一定要使用分号，使用分号是为了在压缩js代码时不至于出现js的编译错误，因为压缩的时候是删除了所有的空格和回车符的。

（2）命名规则

遵循规范的命名规则，提高了代码的可读性，好的命名本身就是好的注释。

1，大小写：现在较流行javascript的面向对象编程，那么就会有公有或私有的概念，原则是公有接口的命名首字母大写，私有接口的命名首字母小写。

2，命名：禁止使用各种缩写，命名应该描述其意义，而不是描述其类型，禁止使用标识类型的前缀

不推荐

 

1. getWin 
2. function doSomething(str,  integer) { 
3.      ... ... 
4. } 
5. function doSomething(strMessage,  intLength) {  
6.     ...  ... 
7. } 

正确命名

 

1. getWindow function doSomething(message, length) { ... ... } 

（3）编程规范

javascript的编程规范关乎代码的性能，代码的简洁。

1，变量定义

变量定义使用关键字var。非必需，不要使用全局变量，这样可以减少不必要的变量定义查询。变量应该有个初始化的值，或者设置为null。避免使用关键字with，with的性能差。集中定义变量，减少代码量。

 

1. var counter = 0, empty = null; 

2，函数定义

函数定义应该在其使用之前。函数内部的函数应该定义在变量之后。减少定义全局函数。函数定义为立即执行，应该用括号包含函数定义体，这样可读性好。

 

1. var statement. 
2. function outer(c, d) { 
3.     var e = c * d; 
4.  
5.     function inner(a, b) { 
6.         return (e * a) + b; 
7.     } 
8.  
9.     return inner(0, 1); 
10. } 
11.  
12. var collection = (function () { 
13.     var keys = [], values = []; 
14.  
15.     return { 
16.         get: function () { 
17.             ...... 
18.         } 
19.     }; 
20. }()); 

3，函数多次调用，应该使用函数别名。比如在循环中多次调用某个函数，应该定义一个函数别名，减少调用范围链的跳转，提高性能。

 

1. function doSomething() { 
2.     var get = getDataByIndex; 
3.  
4.      for (var counter = 0; counter < 10000; counter++) { 
5.         var current = get(counter); 
6.  
7.         // ... 
8.     } 
9. } 

4，值比较尽量使用严格比较操作符，减少类型的转换操作。

 

1. if (x === 5 && y !== 4) 

5，循环与递归：尽量把性能差的操作放在循环外部。预先计算在循环中要使用的值。在上下文中有多个循环时，定义一个统一的循环变量，避免变量无意义的多次定义。

错误编码

 

1. // example 1 
2. for (var counter = 0; counter < 10000; counter++) { 
3.     try { 
4.        doSomething(); 
5.     } catch (e) { 
6.     alert('Failure: ' + e); 
7.         break; 
8.     } 
9. } 
10.  
11. // example 2 
12. for (var counter = 0; 
13. counter < document.getElementsByTagName('div').length; 
14. counter++) { 
15.     doSomething(); 
16. } 
17.  
18. // example 3 
19. for (var counter = 0; counter < 10; counter++) { 
20.     doSomething1(); 
21. }; 
22.  
23. for (var counter = 0; counter < 10; counter++) { 
24.     doSomething2(); 
25. }; 

正确编码

 

1. // example 1 
2.  try { 
3.     for (var counter = 0; counter < 10000; counter++) { 
4.          doSomething(); 
5.      } 
6. } catch (e) { 
7.     alert('Failure: ' + e); 
8. } 
9.  
10.  
11. // example 2 
12. var target = document.getElementsByTagName('div').length; 
13. for (var counter = 0;counter < target ;counter++) { 
14.     doSomething(); 
15. } 
16.  
17. // example 3 
18. var counter = 0; 
19. for (counter = 0; counter < 10; counter++) { 
20.     doSomething1(); 
21. }; 
22. for (counter = 0; counter < 10; counter++) { 
23.     doSomething2(); 
24. }; 

6，Dom操作：减少Dom树的更新次数，尽量合并Dom树的更新操作，提高性能。减少赋值给innerHTML的次数。避免给Dom objects上的expando属性赋值，减少可能的内存泄漏。

7，使用全局的变量和方法：避免使用eval，eval非常耗性能。如果要使用全局的变量或方法，应该加上window，减少上下文的定义查找。