OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

前置逗号是不好的JavaScript代码书写习惯吗?


分享到
分类 JS学习   关键字 分享   发布 kris  1408761771779
注意 转载须保留原文链接,译文链接,作者译者等信息。  
个人认为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

社区评论 ( Beta版 )
  • #0 452125301@qq.com 1408780832775

    用coffeescript后,不再纠结这个了,因为根本不需要分号。

  • #1 ancient_violet 1408796791067

    @452125301@qq.com #0

    CS的代码看上去确实比较高大上

  • #2 fragrant_cloud 1408876296526

    coffeescript 确实是是一个让人无法割舍的爱。唯一需要的是团队统一做一些取舍。比如执行函数省略括号,我就很不建议。这个很容易让人理解困难。比如 a b c d yes

    这么一行。

  • #3 small_haze 1408928170935

    @fragrant_cloud #2

    小哥 括号能省吗?

  • #4 文巩未 1408954070810

    学习了

  • #5 康人贞 1410839026323

    @fragrant_cloud #2

    省略括号,确实很迷惑

  • #6 白居易 1436769733999

    然并卵,符号写在了前面让我如何接受。

OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. OurJS-免费开源的博客引擎,论坛系统,网站模板和轻量级的CMS
  2. 痛苦的Java程序员
  3. JavaScript构建(编绎)系统大比拼:Grunt vs. Gulp vs. NPM
  4. JavaScript中的继承,构造函数以及new关键字的作用
  5. TJ Holowaychuk将Express维护权移交给StrongLoop
  6. Google官方支持的NodeJS访问API,提供后台登录授权
  7. 微软Azure云推出基于JSON的NoSQL数据库DocumentDB
  8. 有可能将CSS应用到一个字符的一半吗?
  9. Amazon云增长过快,吓坏股东
  10. fibjs 比 nodejs 快五倍
  11. AirJD-简单好用的免费建站工具

 相关阅读 - JS学习
  1. 在node.js响应流中设置多个Set-Cookie header属性
  2. JavaScript:世界上误解最深的语言
  3. 告别Node.js
  4. Node.js手册:require是如何工作的
  5. JavaScript最大堆栈的数量
  6. 7个步骤:让JavaScript变得更好
  7. 在JavaScript数组中找到最小元素的位置
  8. 在JavaScript中创建命名空间的几种写法
  9. JavaScript中NaN的秘密
  10. jQuery:在一个回调中处理多个请求

 关键字 - 分享
  1. 企业开发小程序的过程中,这些方面必须重视!
  2. 企业开发微信小程序的过程中,最容易出现这些问题!
  3. 微商城想快速发展,软文营销工作必须做好!
  4. LEADTOOLS v19试用版安装指南图文详解
  5. Xamarin for Visual Studio v4.6发布,重新设计属性页和Manifest编辑器
  6. 开发小程序之前,这些问题必须考虑清楚!
  7. 微信小程序的出现,带给传统企业的优势!
  8. 微分销系统要提升,这些方面是重点!
  9. .Net文档图像处理工具包GdPicture.NET发布v14,提供最先进的PDF和文档成像技术
  10. Zend Studio使用教程:使用jQuery支持进行开发(一)

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号