现如今最流行的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 加号(+)运算符号
Dec 06 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
Mar 14 Javascript
JS跨域代码片段
Aug 30 Javascript
Select标签下拉列表二级联动级联实例代码
Feb 07 Javascript
JS实现样式清新的横排下拉菜单效果
Oct 09 Javascript
利用JavaScript阻止表单提交的两种方法
Aug 11 Javascript
微信小程序 navigation API实例详解
Oct 02 Javascript
Javascript 判断两个IP是否在同一网段实例代码
Nov 28 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
Mar 31 Javascript
Vue代码分割懒加载的实现方法
Nov 23 Javascript
小试小程序云开发(小结)
Jun 06 Javascript
vue中 this.$set的使用详解
Nov 17 Vue.js
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
escape unescape的php下的实现方法
2007/04/27 PHP
php最简单的删除目录与文件实现方法
2014/11/28 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
2013/05/07 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
2014/01/09 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
jQuery中:animated选择器用法实例
2014/12/29 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
2015/07/29 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
2015/11/01 Javascript
浅谈JavaScript函数的四种存在形态
2016/06/08 Javascript
Zabbix添加Node.js监控的方法
2016/10/20 Javascript
微信小程序报错:this.setData is not a function的解决办法
2017/09/27 Javascript
JavaScript实现音乐自动切换和轮播
2017/11/05 Javascript
laydate日历控件使用方法详解
2017/11/20 Javascript
jQuery中的类名选择器(.class)用法简单示例
2018/05/14 jQuery
js中forEach,for in,for of循环的用法示例小结
2020/03/14 Javascript
基于JavaScript实现简单扫雷游戏
2021/01/02 Javascript
Python实现远程调用MetaSploit的方法
2014/08/22 Python
Python中itertools模块用法详解
2014/09/25 Python
基于wxpython实现的windows GUI程序实例
2015/05/30 Python
Python缓存技术实现过程详解
2019/09/25 Python
Python中顺序表原理与实现方法详解
2019/12/03 Python
关于matplotlib-legend 位置属性 loc 使用说明
2020/05/16 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
加热夹克:RAVEAN
2018/10/19 全球购物
国贸专业的职业规划书
2014/03/15 职场文书
教师批评与自我批评范文
2014/10/15 职场文书
应急管理工作总结2015
2015/05/04 职场文书
计算机实训心得体会
2016/01/14 职场文书
Python实现8种常用抽样方法
2021/06/27 Python
SpringBoot整合Mybatis Generator自动生成代码
2021/08/23 Java/Android
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js