现如今最流行的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 相关文章推荐
utf-8编码引起js输出中文乱码的解决办法
Jun 23 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
Mar 05 Javascript
jquery中trigger()无法触发hover事件的解决方法
May 07 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 Javascript
js eval函数使用,js对象和字符串互转实例
Mar 06 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
Node.js+ES6+dropload.js实现移动端下拉加载实例
Jun 01 Javascript
angular4强制刷新视图的方法
Oct 09 Javascript
Elasticsearch实现复合查询高亮结果功能
Sep 10 Javascript
浅谈layui分页控件field参数接收对象的问题
Sep 20 Javascript
Vue页面跳转传递参数及接收方式
Sep 09 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高级OOP技术演示
2009/08/27 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
PHP $O00OO0=urldecode & eval 解密,记一次商业源码的去后门
2020/09/13 PHP
用YUI做了个标签浏览效果
2007/02/20 Javascript
用js模拟JQuery的show与hide动画函数代码
2010/09/20 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
javascript重复绑定事件造成的后果说明
2013/03/02 Javascript
AJAX跨域请求json数据的实现方法
2013/11/11 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
2014/02/17 Javascript
超级好用的jQuery圆角插件 Corner速成
2014/08/31 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
bootstrap布局中input输入框右侧图标点击功能
2016/05/16 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
AngularJS页面带参跳转及参数解析操作示例
2017/06/28 Javascript
Vue入门之数据绑定(小结)
2018/01/08 Javascript
jQuery中each方法的使用详解
2018/03/18 jQuery
React 项目迁移 Webpack Babel7的实现
2018/09/12 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
2019/04/28 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
python实现获取序列中最小的几个元素
2014/09/25 Python
Python使用lxml模块和Requests模块抓取HTML页面的教程
2016/05/16 Python
python爬虫获取淘宝天猫商品详细参数
2020/06/23 Python
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
详解mac python+selenium+Chrome 简单案例
2019/11/08 Python
一文详述 Python 中的 property 语法
2020/09/01 Python
如何用Python提取10000份log中的产品信息
2021/01/14 Python
香港时尚女装购物网站:ZAFUL
2017/07/19 全球购物
办公室主任主任岗位责任制
2014/02/11 职场文书
各营销点岗位职责范本
2014/03/05 职场文书
捐款倡议书格式范文
2014/05/14 职场文书
慈善晚会策划方案
2014/05/14 职场文书
2016国庆节活动宣传语
2015/11/25 职场文书
关于MySQL中的 like操作符详情
2021/11/17 MySQL