现如今最流行的JavaScript代码规范


Posted in Javascript onMarch 08, 2014

什么是最佳的JavaScript代码编程规范?这可能是一个众口难调的问题。那么,不妨换个问题,什么代码规范最流行?

sideeffect.kr通过分析GitHub上托管的开源代码,得出了一些有趣的结果。一起来看看吧。

现如今最流行的JavaScript代码规范

行末逗号对行首逗号
行末引号:

var foo = 1, 
    bar = 2, 
    baz = 3; var obj = { 
    foo: 1, 
    bar: 2, 
    baz: 3 
};

行首引号:
var foo = 1 
  , bar = 2 
  , baz = 3; var obj = { 
    foo: 1 
  , bar: 2 
  , baz: 3 
};

行末,92.345%;行首,7.655%。(基于1,100,251次提交统计。)

空格和Tab
这年头大家都爱用空格了。使用空格缩进可以保证不同的开发者、不同的编辑器设置下看到的结果是一样的。

空格,81.1 %;Tab,18.9 %。(基于2,019,550次提交统计。)

函数后是否添加空格
无空格

function foo() { 
  return "bar"; 
}

有空格
function foo () { 
  return "bar"; 
}

无空格,67.424 %;有空格,32.576 %。(基于1,212,488次提交统计。)

参数与括号间是否有空格
无空格

function fn(arg1, arg2) { 
//or 
if (true) {

有空格
function fn( arg1, arg2 ) { 
  // ... 
} if ( true ) { 
  // ... 
}

无空格,94.31 %;有空格,5.69 %。(基于1,514,971次提交统计。)

对象字面量中冒号周围是否有空格
冒号后有空格

{ 
  foo: 1, 
  bar: 2, 
  baz: 3 
}

冒号后无空格
{ 
  foo:1, 
  bar:2, 
  baz:3 
}

冒号前后均有空格
{ 
  foo : 1, 
  bar : 2, 
  baz : 3 
}

后空格,62.955 %;无空格,22.891 %;前后空格,14.154 %。(基于1,300,035次提交统计。)

个人觉得,无空格太挤了,不利于快速分清key和value。前后空格的话,恐怕需要对齐冒号,看起来才美观,从统计数据来看,大部分程序员懒得对齐冒号(还是说,大部分程序员的IDE或编辑器不够智能?)

条件语句
有空格

if (true) { 
  //... 
} while (true) { 
  //... 
} 
switch (v) { 
  //... 
}

无空格
if(true) { 
  //... 
} while(true) { 
  //... 
} 
switch(v) { 
  //... 
}

有空格,78.276 %;无空格,21.724 %。(基于1,163,316次提交。)

单引号、双引号
单引号,56.791 %;双引号,43.209 %。(基于1,705,910次提交。)

总结
所以说,最流行的代码规范是:

•行末逗号
•空格缩进
•函数名称后无空格
•函数参数与括号间无空格
•对象字面量的冒号后加空格,冒号前不加
•条件语句关键字后加空格

流行的不一定是好的(比如流行性感冒),但是从交流的角度来说,按照流行的风格编写代码,可以让你的代码在大多数人看起来更习惯。

Javascript 相关文章推荐
文本框的字数限制功能jquery插件
Nov 24 Javascript
Javascript事件实例详解
Nov 06 Javascript
Javascript基础知识(三)BOM,DOM总结
Sep 29 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
Oct 14 Javascript
javascript常用正则表达式汇总
Jul 31 Javascript
javascript中错误使用var造成undefined
Mar 31 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
Aug 31 Javascript
vue的props实现子组件随父组件一起变化
Oct 27 Javascript
JavaScript实现替换字符串中最后一个字符的方法
Mar 07 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
微信小程序 搜索框组件代码实例
Sep 06 Javascript
浅谈vue3中effect与computed的亲密关系
Oct 10 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
Mar 08 #Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
Mar 08 #Javascript
JS实现鼠标单击与双击事件共存
Mar 08 #Javascript
js触发onchange事件的方法说明
Mar 08 #Javascript
关于onchange事件在IE和FF下的表现及解决方法
Mar 08 #Javascript
javascript中的事件代理初探
Mar 08 #Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
Mar 08 #Javascript
You might like
php实现保存submit内容之后禁止刷新
2014/03/19 PHP
微信支付的开发流程详解
2016/09/13 PHP
PHP简单装饰器模式实现与用法示例
2017/06/22 PHP
PHP常见数组排序方法小结
2018/08/20 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
js的hasownproperty使用示例
2014/03/02 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
Vue开发中整合axios的文件整理
2017/04/29 Javascript
javascript实现非常简单的小数取整功能示例
2017/06/13 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
ElementUI多个子组件表单的校验管理实现
2019/11/07 Javascript
vant实现购物车功能
2020/06/29 Javascript
vue+高德地图实现地图搜索及点击定位操作
2020/09/09 Javascript
Vue 数据响应式相关总结
2021/01/28 Vue.js
Python ORM框架SQLAlchemy学习笔记之关系映射实例
2014/06/10 Python
Python获取系统默认字符编码的方法
2015/06/04 Python
Python实现PS图像调整之对比度调整功能示例
2018/01/26 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
jupyter notebook 中输出pyecharts图实例
2020/04/23 Python
python空元组在all中返回结果详解
2020/12/15 Python
html5的画布canvas——画出简单的矩形、三角形实例代码
2013/06/09 HTML / CSS
全球性的在线购物网站:Zapals
2017/03/22 全球购物
Expedia韩国官网:亚洲发展最快的在线旅游门户网站
2018/02/26 全球购物
银行爱岗敬业演讲稿
2014/05/05 职场文书
学校爱心捐款倡议书
2014/05/13 职场文书
2015年司机工作总结
2015/04/23 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
2015年调度员工作总结
2015/04/30 职场文书
2015年社区国庆节活动总结
2015/07/30 职场文书
电力安全学习心得体会
2016/01/18 职场文书
python glom模块的使用简介
2021/04/13 Python
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript