现如今最流行的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 相关文章推荐
javascript 程序库的比较(一)之DOM功能
Apr 07 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
Dec 12 Javascript
js单例模式的两种方案
Oct 22 Javascript
利用js制作html table分页示例(js实现分页)
Apr 25 Javascript
JQuery给网页更换皮肤的方法
May 30 Javascript
Jquery技巧(必须掌握)
Mar 16 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
JS获取鼠标选中的文字
Aug 10 Javascript
文件上传,iframe跨域数据提交的实现
Nov 18 Javascript
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
Nov 22 Javascript
vue-列表下详情的展开与折叠案例
Jul 28 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
缅甸的咖啡简史
2021/03/04 咖啡文化
咖啡冲泡指南 咖啡有哪些制作方式 单品咖啡 意式咖啡
2021/03/06 冲泡冲煮
php Smarty date_format [格式化时间日期]
2010/03/15 PHP
PHP url 加密解密函数代码
2011/08/26 PHP
解析关于java,php以及html的所有文件编码与乱码的处理方法汇总
2013/06/24 PHP
PHP使用CURL模拟登录的方法
2015/07/08 PHP
PHP检测用户是否关闭浏览器的方法
2016/02/14 PHP
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
jquery 实现窗口的最大化不论什么情况
2013/09/03 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
jQuery标签编辑插件Tagit使用指南
2015/04/21 Javascript
Node.js事件驱动
2015/06/18 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
2016/09/05 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
js异步编程小技巧详解
2017/08/14 Javascript
[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局
2016/03/03 DOTA
详解python调度框架APScheduler使用
2017/03/28 Python
Python基于socket模块实现UDP通信功能示例
2018/04/10 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
Keras 切换后端方式(Theano和TensorFlow)
2020/06/19 Python
python中常用的数据结构介绍
2021/01/12 Python
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
戴尔美国官方折扣店:Dell Outlet
2018/02/13 全球购物
某个公司的Java笔面试题
2016/03/11 面试题
三八妇女节活动主持词
2014/03/17 职场文书
大学生优秀班干部事迹材料
2014/05/26 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
食品安全主题班会
2015/08/13 职场文书
解决numpy和torch数据类型转化的问题
2021/05/23 Python
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js