现如今最流行的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中String和StringBuffer的速度之争
Apr 01 Javascript
jQuery与ExtJS之选择实例分析
Aug 19 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
May 05 Javascript
js怎么终止程序return不行换jfslk
May 30 Javascript
详解JavaScript中void语句的使用
Jun 04 Javascript
使用重写url机制实现验证码换一张功能
Aug 01 Javascript
Vue的watch和computed方法的使用及区别介绍
Sep 06 Javascript
理顺8个版本vue的区别(小结)
Sep 17 Javascript
自己动手封装一个React Native多级联动
Sep 19 Javascript
详解angularjs跨页面传参遇到的一些问题
Nov 01 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
Feb 15 Javascript
解决vue中provide inject的响应式监听
Apr 19 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中的正规表达式(一)
2006/10/09 PHP
优化PHP代码的53条建议
2008/03/27 PHP
深入解析phpCB批量转换的代码示例
2013/06/27 PHP
PHP实现的简单mock json脚本分享
2015/02/10 PHP
PHP5.5.15+Apache2.4.10+MySQL5.6.20配置方法分享
2016/05/06 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
JavaScript 监听textarea中按键事件
2009/10/08 Javascript
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
再论Javascript的类继承
2011/03/05 Javascript
jQuery 自定义函数写法分享
2012/03/30 Javascript
jquery利用ajax调用后台方法实例
2013/08/23 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
2013/11/14 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
简单的js计算器实现
2016/10/26 Javascript
jQuery复合事件用法示例
2017/06/10 jQuery
基于vue实现分页效果
2017/11/06 Javascript
vue组件父子间通信之综合练习(聊天室)
2017/11/07 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
2018/01/13 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
vue+element实现批量删除功能的示例
2018/02/28 Javascript
解决vue-router进行build无法正常显示路由页面的问题
2018/03/06 Javascript
js module大战
2019/04/19 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
2019/11/12 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
2020/04/04 jQuery
Centos下实现安装Python3.6和Python2共存
2018/08/15 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
用Python爬取QQ音乐评论并制成词云图的实例
2019/08/24 Python
使用html5新特性轻松监听任何App自带返回键的示例
2018/03/13 HTML / CSS
英国著名的小众美容品牌网站:Alyaka
2017/08/08 全球购物
Puma印度官网:德国运动品牌
2019/10/06 全球购物
德国2018年度最佳在线药房:Bodfeld Apotheke
2019/11/04 全球购物
高中运动会广播稿
2014/01/21 职场文书
20年同学聚会邀请函
2014/02/04 职场文书
vue使用echarts实现折线图
2022/03/21 Vue.js
Mysql数据库group by原理详解
2022/07/07 MySQL