现如今最流行的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 web页面刷新的方法收集
Jul 02 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
Sep 15 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
Sep 09 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
May 30 Javascript
JS输出空格的简单实现方法
Sep 08 Javascript
微信小程序 scroll-view组件实现列表页实例代码
Dec 14 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 Javascript
js异步编程小技巧详解
Aug 14 Javascript
Vue利用History记录上一页面的数据方法实例
Nov 02 Javascript
JavaScript动态创建二维数组的方法示例
Feb 01 Javascript
layui使用表格渲染获取行数据的例子
Sep 13 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初学者头疼问题总结
2006/07/08 PHP
smarty模板中拼接字符串的方法
2014/02/14 PHP
php中常量DIRECTORY_SEPARATOR用法深入分析
2014/11/14 PHP
php微信开发之带参数二维码的使用
2016/08/03 PHP
javascript中的关于类型转换的性能优化
2010/12/14 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
2014/12/31 Javascript
JavaScript把数组作为堆栈使用的方法
2015/03/20 Javascript
jquery移动点击的项目到列表最顶端的方法
2015/06/24 Javascript
JS验证IP,子网掩码,网关和MAC的方法
2015/07/02 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
layui导航栏实现代码
2017/05/19 Javascript
nginx配置React静态页面的方法教程
2017/11/03 Javascript
基于js中style.width与offsetWidth的区别(详解)
2017/11/12 Javascript
vue 组件 全局注册和局部注册的实现
2018/02/28 Javascript
在vue项目中引入高德地图及其UI组件的方法
2018/09/04 Javascript
利用React Router4实现的服务端直出渲染(SSR)
2019/01/07 Javascript
小试小程序云开发(小结)
2019/06/06 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
[04:45]DOTA2-DPC中国联赛正赛 iG vs LBZS 赛后选手采访
2021/03/11 DOTA
Python字符串处理实现单词反转
2017/06/14 Python
python3+PyQt5图形项的自定义和交互 python3实现page Designer应用程序
2020/07/20 Python
详解Python_shutil模块
2019/03/15 Python
如何基于Python获取图片的物理尺寸
2019/11/25 Python
Python 必须了解的5种高级特征
2020/09/10 Python
德国内衣、泳装和睡衣网上商店:Bigsize Dessous
2018/07/09 全球购物
俄罗斯女装店:12storeez
2019/10/25 全球购物
MYSQL支持事务吗
2013/08/09 面试题
手机业务员岗位职责
2013/12/13 职场文书
高三毕业生自我鉴定
2013/12/20 职场文书
幼儿园毕业寄语
2014/04/03 职场文书
会计系毕业生求职信
2014/05/28 职场文书
药剂专业自荐书
2014/06/20 职场文书
租房协议书范文
2014/08/20 职场文书
PostgreSQL存储过程实用脚本(二):创建函数入门
2021/04/05 PostgreSQL
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android