现如今最流行的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 相关文章推荐
ArrayList类(增强版)
Apr 04 Javascript
javascript获取选中的文本的方法代码
Oct 30 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
Aug 24 Javascript
window.onload使用指南
Sep 13 Javascript
深入探讨javascript函数式编程
Oct 11 Javascript
JavaScript实现简单获取当前网页网址的方法
Nov 09 Javascript
js 判断各种数据类型的简单方法(推荐)
Aug 29 Javascript
vue-router单页面路由
Jun 17 Javascript
动态创建Angular组件实现popup弹窗功能
Sep 15 Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
Jun 24 Javascript
vue $router和$route的区别详解
Dec 02 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 set_time_limit()函数的使用详解
2013/06/05 PHP
php读取文件内容的几种方法详解
2013/06/26 PHP
php中删除、清空session的方式总结
2015/10/09 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
JAVASCRIPT下判断IE与FF的比较简单的方式
2008/10/17 Javascript
js里怎么取select标签里的值并修改
2012/12/10 Javascript
js正文内容高亮效果的实现方法
2013/06/30 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
2014/01/14 Javascript
javascript中in运算符用法分析
2015/04/28 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
2017/01/17 Javascript
从零学习node.js之简易的网络爬虫(四)
2017/02/22 Javascript
Vue.js仿Metronic高级表格(一)静态设计
2017/04/17 Javascript
js实现字符全排列算法的简单方法
2017/05/01 Javascript
基于vue组件实现猜数字游戏
2020/05/28 Javascript
对vue中methods互相调用的方法详解
2018/08/30 Javascript
在vue中解决提示警告 for循环报错的方法
2018/09/28 Javascript
小程序实现左右来回滚动字幕效果
2018/12/28 Javascript
关于Vue源码vm.$watch()内部原理详解
2019/04/26 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
详解使用mocha对webpack打包的项目进行"冒烟测试"的大致流程
2020/04/27 Javascript
[43:24]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.12
2020/12/17 DOTA
快速了解python leveldb
2018/01/18 Python
Django 使用logging打印日志的实例
2018/04/28 Python
python实现泊松图像融合
2018/07/26 Python
Python 使用Numpy对矩阵进行转置的方法
2019/01/28 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
物流专业大学的自我评价
2014/01/11 职场文书
英语专业职业生涯规划范文
2014/03/05 职场文书
小学生学习感言
2014/03/10 职场文书
铁路安全事故反思
2014/04/26 职场文书
小露珠教学反思
2014/04/30 职场文书
求职信标题怎么写
2014/05/26 职场文书
党员群众路线对照检查材料思想汇报
2014/09/17 职场文书
学雷锋献爱心活动总结
2015/05/11 职场文书
汽车车尾标语大全
2015/08/11 职场文书
Python 线程池模块之多线程操作代码
2021/05/20 Python