现如今最流行的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 相关文章推荐
封装好的省市地区联动控件附下载
Aug 13 Javascript
返回对象在当前级别中是第几个元素的实现代码
Jan 20 Javascript
jquery选择器之基本过滤选择器详解
Jan 27 Javascript
js闭包所用的场合以及优缺点分析
Jun 22 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 Javascript
如何让一个json文件显示在表格里【实现代码】
May 09 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
Sep 09 Javascript
微信小程序 Audio API详解及实例代码
Sep 30 Javascript
angular中的http拦截器Interceptors的实现
Feb 21 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
Oct 12 Javascript
JavaScript冒泡算法原理与实现方法深入理解
Jun 04 Javascript
解析原生JS getComputedStyle
May 25 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和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
PHP 导出数据到淘宝助手CSV的方法分享
2010/02/27 PHP
PHP链表操作简单示例
2016/10/15 PHP
PHP网站自动化配置的实现方法(必看)
2017/05/27 PHP
DOM精简教程
2006/10/03 Javascript
js 图片轮播(5张图片)
2008/12/30 Javascript
深入document.write()与HTML4.01的非成对标签的详解
2013/05/08 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
jquery中change()用法实例分析
2015/02/06 Javascript
javascript检测两个数组是否相似
2015/05/19 Javascript
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
2016/09/17 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
2016/11/02 Javascript
Bootstrap和Java分页实例第二篇
2016/12/23 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
prettier自动格式化去换行的实现代码
2020/08/25 Javascript
使用js和canvas实现时钟效果
2020/09/08 Javascript
[01:32:22]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第一场 2月5日
2021/03/11 DOTA
初步介绍Python中的pydoc模块和distutils模块
2015/04/13 Python
python实现类的静态变量用法实例
2015/05/08 Python
Python matplotlib画图实例之绘制拥有彩条的图表
2017/12/28 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
使用python对文件中的单词进行提取的方法示例
2018/12/21 Python
Python 函数返回值的示例代码
2019/03/11 Python
Python GUI编程完整示例
2019/04/04 Python
python3下载抖音视频的完整代码
2019/06/05 Python
flask的orm框架SQLAlchemy查询实现解析
2019/12/12 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
英国最大的纸工艺品商店:CraftStash
2018/12/01 全球购物
党支部党的群众路线对照检查材料
2014/09/24 职场文书
清明节网上祭英烈寄语2015
2015/03/04 职场文书
中标通知书
2015/04/17 职场文书
导游带团欢迎词
2015/09/30 职场文书
WCG2010 星际争霸决赛 Flash vs Goojila 1 星际经典比赛回顾
2022/04/01 星际争霸
Python尝试实现蒙特卡罗模拟期权定价
2022/04/21 Python