前置逗号之争！

个人认为Airbnb的javascript代码规范是写的比较好的, 不过其中有一章关于逗号Commas的使用是这样写的： 前置逗号（Leading commas）：不要使用

// 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负责人，参见：下一阶段的NodeJS) 写过一篇文章，讨论将逗号写在前面的优缺点。讨论中尽管很多人无法适应comma-first。但其中有一条优点无法回避，逗号前移可以很容易发现语法错误。

下段代码的d变量名后面少了一个逗号，这是我们经常犯的一个错误，在一般代码风格中，这个错误是非常不容易被发现的：

// error in standard style var a = "ape",   b = "bat",   c = "cat",   d = "dog"   e = "elf",   f = "fly",   g = "gnu",   h = "hat",   i = "ibu";

但在前置代码规范中，一眼就可以看得出来： 

// error in comma-first style var a = "ape"   , b = "bat"   , c = "cat"   , d = "dog"   e = "elf"   , f = "fly"   , g = "gnu"   , h = "hat"   , i = "ibu"   ;

前置逗号与"."的连续型写法或者叫做链式写法(可能还有"+")是保持一致的，如：

jQuery   .ajax('//home/url')   .done(function() {   })   .error(function() {   })   .always(function() {   })

前置逗号在最后新增删除变量时只需要影响一行。而无需删除或添加原来最后一个变量的结束符号。并且前置写法，2个空格的tab即可将变量对齐，2个space可使代码更紧凑。传统写法，需要4个空格的tab才能使变量对齐。

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来声明，不用连续声明的方式。而且默认不用分号结束的：

这种格式的代码看上去也比较优美，同时避免了关于逗号的争论：

var a = "ape" var b = "bat" var c = "cat"

其实省略分号也是可以借鉴的，所以本文认为比较好的逗号格式应该是这样的：

var one   , two   , three   var prop = {     a: 'a'   , b: 'b'   , c: 'c'   , d: 'd' }

负作用

其实省略分号也有负用，在与闭包结合时会有一些问题，如下段代码：

var a = 1   (function() { console.log(a) })() // TypeError: number is not a function

 一个错误抛出了，在JS解释执行时，很可能将之合成了1行。

var a = 1 (function() { console.log(a) })()

错误就产生了，所以很多开源框架都会在闭包前置或后置分号，以避免前人无意或故意遗漏分号从而造成错误，正确的写法应该是：

var a = 1   ;(function() { console.log(a) })()

不使用分号的bootstrap框架也是这么干的，不过bootstrap框架使用了看上去更加高级的+号分隔闭包并后置分号，不过这一套不适合代码与闭包混合使用的场景，还是不要学比较好。

var a = 1   + function() { console.log(a) } ();  //a 的值会变成 NaN

原文发布时间：2014-08-26

本文来自云栖合作伙伴“linux中国”

相关资源：七夕情人节表白HTML源码(两款)