现如今最流行的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 相关文章推荐
使用jQuery简化Ajax开发 Ajax开发入门
Oct 14 Javascript
js 函数的副作用分析
Aug 23 Javascript
原生js实现日期联动
Jan 12 Javascript
Vue.js对象转换实例
Jun 07 Javascript
浅谈Node Inspector 代理实现
Oct 19 Javascript
微信小程序实现MUI数字输入框效果
Jan 31 Javascript
解决Webpack 热部署检测不到文件变化的问题
Feb 22 Javascript
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
Jun 13 Javascript
VueCli3.0中集成MockApi的方法示例
Jul 05 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
JavaScript 实现页面滚动动画
Apr 24 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/10/09 PHP
PHP中ob_start函数的使用说明
2013/11/11 PHP
php实现httpclient类示例
2014/04/08 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
基于php实现七牛抓取远程图片
2015/12/01 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
JavaScript 开发规范要求(图文并茂)
2010/06/11 Javascript
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
2012/02/07 Javascript
JavaScript获取网页中第一个链接ID的方法
2015/04/03 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
JS实现字符串转驼峰格式的方法
2016/12/16 Javascript
JavaScript表单验证完美代码
2017/03/02 Javascript
JS原生带小白点轮播图实例讲解
2017/07/22 Javascript
关于JS与jQuery中的文档加载问题
2017/08/22 jQuery
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
js中关于Blob对象的介绍与使用
2019/11/29 Javascript
Python实现的购物车功能示例
2018/02/11 Python
python如何读写json数据
2018/03/21 Python
selenium+python设置爬虫代理IP的方法
2018/11/29 Python
Django框架之DRF 基于mixins来封装的视图详解
2019/07/23 Python
Python项目 基于Scapy实现SYN泛洪攻击的方法
2019/07/23 Python
python3 字符串知识点学习笔记
2020/02/08 Python
VS2019+python3.7+opencv4.1+tensorflow1.13配置详解
2020/04/16 Python
python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
2020/04/24 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
JPA面试常见问题
2016/11/14 面试题
《赵州桥》教学反思
2014/02/17 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
python 中的jieba分词库
2021/11/23 Python
Python如何快速找到多个字典中的公共键(key)
2022/04/29 Python