现如今最流行的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 相关文章推荐
用prototype实现的简单小巧的多级联动菜单
Mar 24 Javascript
Js动态创建div
Sep 25 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
Dec 28 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
Nov 22 Javascript
通过onmouseover选项卡实现img图片的变化
Feb 12 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
Sep 01 Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 Javascript
第一次接触神奇的前端框架vue.js
Dec 01 Javascript
vue中计算属性(computed)、methods和watched之间的区别
Jul 27 Javascript
Vue props 单向数据流的实现
Nov 06 Javascript
iview form清除校验状态的实现
Sep 19 Javascript
JavaScript实现网页tab栏效果制作
Nov 20 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
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
jQuery 下拉列表 二级联动插件分享
2012/03/29 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
2013/01/10 Javascript
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
PHP PDO操作总结
2014/11/17 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
JS动态增删表格行的方法
2016/03/03 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
2016/04/17 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
Angular实现跨域(搜索框的下拉列表)
2017/02/16 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
2018/08/12 Javascript
js中int和string数据类型互相转化实例
2019/01/16 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
vue配置多代理服务接口地址操作
2020/09/08 Javascript
Python中isnumeric()方法的使用简介
2015/05/19 Python
python 爬虫 批量获取代理ip的实例代码
2018/05/22 Python
Python3实现的回文数判断及罗马数字转整数算法示例
2019/03/27 Python
不归路系列:Python入门之旅-一定要注意缩进!!!(推荐)
2019/04/16 Python
详解python 模拟豆瓣登录(豆瓣6.0)
2019/04/18 Python
python3 assert 断言的使用详解 (区别于python2)
2019/11/27 Python
mac使用python识别图形验证码功能
2020/01/10 Python
python requests包的request()函数中的参数-params和data的区别介绍
2020/05/05 Python
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
2016/05/13 HTML / CSS
爱游人:Travelliker
2017/09/05 全球购物
京东国际站:JOYBUY
2017/11/23 全球购物
马来西亚最大的在线隐形眼镜商店:MrLens
2019/03/27 全球购物
管理学院毕业生自荐信范文
2014/03/10 职场文书
2014年大学生四年规划书范文
2014/04/03 职场文书
春季防火方案
2014/05/10 职场文书
综治维稳工作汇报
2014/10/27 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
毕业设计致谢词
2015/05/14 职场文书
酒店员工手册范本
2015/05/14 职场文书