个人认为Airbnb的javascript代码规范是写的比较好的, 不过其中有一章关于逗号Commas的使用是这样写的:
前置逗号(Leading commas):不要使用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
// bad var once , upon , aTime; // good var once, upon, aTime; // bad var hero = { firstName: 'Bob' , lastName: 'Parr' , heroName: 'Mr. Incredible' , superPower: 'strength' }; // good var hero = { firstName: 'Bob', lastName: 'Parr', heroName: 'Mr. Incredible', superPower: 'strength' }; |
其实在很多开源软件中前置逗号是经常使用的,它是Haskell语言默认的代码风格。
Node.JS的前负责人isaacs(现npmjs.org负责人) 写过一篇文章,讨论将逗号写在前面的优缺点。讨论中尽管很多人无法适应comma-first。但其中有一条优点无法回避,逗号前移可以很容易发现语法错误。
下段代码的d变量名后面少了一个逗号,这是我们经常犯的一个错误,在一般代码风格中,这个错误是非常不容易被发现的:
1 2 3 4 5 6 7 8 9 10 |
// error in standard style var a = "ape", b = "bat", c = "cat", d = "dog" e = "elf", f = "fly", g = "gnu", h = "hat", i = "ibu"; |
但在前置代码规范中,一眼就可以看得出来:
1 2 3 4 5 6 7 8 9 10 11 |
// error in comma-first style var a = "ape" , b = "bat" , c = "cat" , d = "dog" e = "elf" , f = "fly" , g = "gnu" , h = "hat" , i = "ibu" ; |
前置逗号与”.”的连续型写法或者叫做链式写法(可能还有”+”)是保持一致的,如:
1 2 3 4 5 6 7 8 |
jQuery .ajax('//home/url') .done(function() { }) .error(function() { }) .always(function() { }) |
前置逗号在最后新增删除变量时只需要影响一行。而无需删除或添加原来最后一个变量的结束符号。并且前置写法,2个空格的tab即可将变量对齐,2个space可使代码更紧凑。传统写法,需要4个空格的tab才能使变量对齐。
1 2 3 4 5 6 7 8 9 10 11 12 |
var a = "ape" , b = "bat" , c = "cat" , d = "dog" , e = "add new line" //只影响的一行(添加或删除) ; var a = "ape", b = "bat", c = "cat", d = "dog", e = "add new line"; //删除此行时需要将前一行d的最后一个逗号同时删除,此时会影响两行;新加时同时删除原有的分号,并换成逗号。此时即易发生输入错误。 |
另外在Twitter的bootstrap框架中,每个变量都使用var来声明,不用连续声明的方式。而且默认不用分号结束的:
这种格式的代码看上去也比较优美,同时避免了关于逗号的争论:
1 2 3 |
var a = "ape" var b = "bat" var c = "cat" |
其实省略分号也是可以借鉴的,所以本文认为比较好的逗号格式应该是这样的:
1 2 3 4 5 6 7 8 9 10 |
var one , two , three var prop = { a: 'a' , b: 'b' , c: 'c' , d: 'd' } |
负作用
其实省略分号也有负用,在与闭包结合时会有一些问题,如下段代码:
1 2 3 4 5 6 7 |
var a = 1 (function() { console.log(a) })() // TypeError: number is not a function |
一个错误抛出了,在JS解释执行时,很可能将之合成了1行。
1 |
var a = 1 (function() { console.log(a) })() |
错误就产生了,所以很多开源框架都会在闭包前置或后置分号,以避免前人无意或故意遗漏分号从而造成错误,正确的写法应该是:
1 2 3 4 5 |
var a = 1 ;(function() { console.log(a) })() |
不使用分号的bootstrap框架也是这么干的,不过bootstrap框架使用了看上去更加高级的+号分隔闭包并后置分号,不过这一套不适合代码与闭包混合使用的场景,还是不要学比较好。
1 2 3 4 5 6 7 |
var a = 1 + function() { console.log(a) } (); //a 的值会变成 NaN |