前置逗号之争!-阿里云开发者社区

开发者社区> 开发与运维> 正文

前置逗号之争!

简介:

前置逗号之争!

个人认为Airbnb的javascript代码规范是写的比较好的, 不过其中有一章关于逗号Commas的使用是这样写的:

前置逗号(Leading commas):不要使用


  1. // bad
  2. var once
  3.   , upon
  4.   , aTime;
  5.  
  6. // good
  7. var once,
  8.     upon,
  9.     aTime;
  10.  
  11. // bad
  12. var hero = {
  13.     firstName: 'Bob'
  14.   , lastName: 'Parr'
  15.   , heroName: 'Mr. Incredible'
  16.   , superPower: 'strength'
  17. };
  18.  
  19. // good
  20. var hero = {
  21.   firstName: 'Bob',
  22.   lastName: 'Parr',
  23.   heroName: 'Mr. Incredible',
  24.   superPower: 'strength'
  25. };

其实在很多开源软件中前置逗号是经常使用的,它是Haskell语言默认的代码风格。

Node.JS的前负责人isaacs(现npmjs.org负责人,参见:下一阶段的NodeJS) 写过一篇文章,讨论将逗号写在前面的优缺点。讨论中尽管很多人无法适应comma-first。但其中有一条优点无法回避,逗号前移可以很容易发现语法错误。

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


  1. // error in standard style
  2. var a = "ape",
  3.   b = "bat",
  4.   c = "cat",
  5.   d = "dog"
  6.   e = "elf",
  7.   f = "fly",
  8.   g = "gnu",
  9.   h = "hat",
  10.   i = "ibu";

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


  1. // error in comma-first style
  2. var a = "ape"
  3.   , b = "bat"
  4.   , c = "cat"
  5.   , d = "dog"
  6.   e = "elf"
  7.   , f = "fly"
  8.   , g = "gnu"
  9.   , h = "hat"
  10.   , i = "ibu"
  11.   ;

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


  1. jQuery
  2.   .ajax('//home/url')
  3.   .done(function() {
  4.   })
  5.   .error(function() {
  6.   })
  7.   .always(function() {
  8.   })

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


  1. var a = "ape"
  2.   , b = "bat"
  3.   , c = "cat"
  4.   , d = "dog"
  5.   , e = "add new line"  //只影响的一行(添加或删除)
  6.   ;
  7.  
  8. var a = "ape",
  9.     b = "bat",
  10.     c = "cat",
  11.     d = "dog",
  12.     e = "add new line"; //删除此行时需要将前一行d的最后一个逗号同时删除,此时会影响两行;新加时同时删除原有的分号,并换成逗号。此时即易发生输入错误。

另外在Twitter的bootstrap框架中,每个变量都使用var来声明,不用连续声明的方式。而且默认不用分号结束的:

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


  1. var a = "ape"
  2. var b = "bat"
  3. var c = "cat"

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


  1. var one
  2.   , two
  3.   , three
  4.  
  5. var prop = {
  6.     a: 'a'
  7.   , b: 'b'
  8.   , c: 'c'
  9.   , d: 'd'
  10. }

负作用

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


  1. var a = 1
  2.  
  3. (function() {
  4. console.log(a)
  5. })()
  6.  
  7. // TypeError: number is not a function

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


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

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


  1. var a = 1
  2.  
  3. ;(function() {
  4. console.log(a)
  5. })()

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


  1. var a = 1
  2.  
  3. + function() {
  4. console.log(a)
  5. } ();
  6.  
  7. //a 的值会变成 NaN

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

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章