现如今最流行的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 相关文章推荐
eclipse导入jquery包后报错的解决方法
Feb 17 Javascript
火狐下input焦点无法重复获取问题的解决方法
Jun 16 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
Jul 31 Javascript
innerHTML中标签可以换行的方法汇总
Aug 14 Javascript
JQuery 传送中文乱码问题的简单解决办法
May 24 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
Jun 22 Javascript
基于javascript实现的购物商城商品倒计时实例
Dec 11 Javascript
servlet+jquery实现文件上传进度条示例代码
Jan 25 Javascript
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 Javascript
微信小程序如何实现radio单选框单击打勾和取消
Jan 21 Javascript
图解JS原型和原型链实现原理
Sep 15 Javascript
解读Vue组件注册方式
May 15 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
用PHP实现的四则运算表达式计算实现代码
2011/08/02 PHP
php数组函数序列之array_intersect() 返回两个或多个数组的交集数组
2011/11/10 PHP
PHP遍历并打印指定目录下所有文件实例
2014/02/10 PHP
PHP两种去掉数组重复值的方法比较
2014/06/19 PHP
ThinkPHP、ZF2、Yaf、Laravel框架路由大比拼
2015/03/25 PHP
了解PHP的返回引用和局部静态变量
2015/06/04 PHP
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
2017/05/04 PHP
Windows下php+mysql5.7配置教程
2017/05/16 PHP
PHP中soap用法示例【SoapServer服务端与SoapClient客户端编写】
2018/12/25 PHP
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
2015/05/13 Javascript
JS、jQuery中select的用法详解
2016/04/21 Javascript
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
webpack打包nodejs项目的方法
2018/09/26 NodeJs
Vue项目安装插件并保存
2019/01/28 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
使用next.js开发网址缩短服务的方法
2020/06/17 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
python BeautifulSoup设置页面编码的方法
2015/04/03 Python
python使用urllib2提交http post请求的方法
2015/05/26 Python
Python中字符串的格式化方法小结
2016/05/03 Python
python和pygame实现简单俄罗斯方块游戏
2021/02/19 Python
Python中的元组介绍
2019/01/28 Python
django云端留言板实例详解
2019/07/22 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
python装饰器代替set get方法实例
2019/12/19 Python
Python调用.NET库的方法步骤
2019/12/27 Python
英国在线泳装店:Simply Swim
2019/05/05 全球购物
优秀毕业生推荐信范文
2014/03/07 职场文书
静心口服夜广告词
2014/03/20 职场文书
个人对照检查材料思想汇报
2014/09/26 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书
详解python网络进程
2021/06/15 Python