现如今最流行的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 相关文章推荐
让你的网站可编辑的实现js代码
Oct 19 Javascript
JQuery中如何传递参数如click(),change()等具体实现
Apr 28 Javascript
Javascript 按位与运算符 (&)使用介绍
Feb 04 Javascript
浅谈Jquery为元素绑定事件
Apr 27 Javascript
基于d3.js实现实时刷新的折线图
Aug 03 Javascript
Angularjs中使用layDate日期控件示例
Jan 11 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
Nov 30 Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 Javascript
浅析vue中常见循环遍历指令的使用 v-for
Apr 18 Javascript
Vue组件之极简的地址选择器的实现
May 31 Javascript
vue观察模式浅析
Sep 25 Javascript
通过图带你深入了解vue的响应式原理
Jun 21 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 和 MySQL 基础教程(三)
2006/10/09 PHP
PHP中防止SQL注入实现代码
2011/02/19 PHP
php中根据变量的类型 选择echo或dump
2012/07/05 PHP
PHP命令行脚本接收传入参数的三种方式
2014/08/20 PHP
PHP生成可点击刷新的验证码简单示例
2016/05/13 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
JavaScript delete操作符应用实例
2009/01/13 Javascript
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
基于JQuery 滑动与动画的说明介绍
2013/04/18 Javascript
使用JSLint提高JS代码质量方法分享
2013/12/16 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
2015/08/05 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
jQuery+formdata实现上传进度特效遇到的问题
2016/02/24 Javascript
浅谈JS原型对象和原型链
2016/03/02 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
js实现移动端轮播图效果
2020/12/09 Javascript
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
Vue-cli3项目引入Typescript的实现方法
2019/10/18 Javascript
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
[02:21]十步杀一人,千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
Python使用新浪微博API发送微博的例子
2014/04/10 Python
Python单例模式实例详解
2017/03/01 Python
python实现二叉树的遍历
2017/12/11 Python
Python使用Scrapy保存控制台信息到文本解析
2017/12/27 Python
pandas DataFrame 交集并集补集的实现
2019/06/24 Python
Python3和pyqt5实现控件数据动态显示方式
2019/12/13 Python
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
萨克斯第五大道英国:Saks Fifth Avenue英国
2019/04/01 全球购物
最新党员思想汇报
2014/01/01 职场文书
教师演讲稿范文
2014/01/08 职场文书
双方协议书
2014/04/22 职场文书
新颖的化妆品活动方案
2014/08/21 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书
如何使用Python实现一个简易的ORM模型
2021/05/12 Python