现如今最流行的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实现回放拖拽轨迹从过程上进行分析
Jun 26 Javascript
js实现按钮控制图片360度翻转特效的方法
Feb 17 Javascript
JS动态改变表格边框宽度的方法
Mar 31 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
Sep 13 Javascript
纯JS代码实现隔行变色鼠标移入高亮
Nov 23 Javascript
js实现二级导航功能
Mar 03 Javascript
js仿网易表单及时验证功能
Mar 07 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
JS简单实现动态添加HTML标记的方法示例
Apr 08 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 Javascript
vue  自定义组件实现通讯录功能
Sep 30 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 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&java(三)
2006/10/09 PHP
Windows下XDebug 手工配置与使用说明
2010/07/11 PHP
在MongoDB中模拟Auto Increment的php代码
2011/03/06 PHP
php的ajax简单实例
2014/02/27 PHP
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
php获取从百度、谷歌等搜索引擎进入网站关键词的方法
2015/07/08 PHP
php 可变函数使用小结
2018/06/12 PHP
PHP htmlentities()函数用法讲解
2019/02/25 PHP
[IE&FireFox兼容]JS对select操作
2007/01/07 Javascript
javascript div 弹出可拖动窗口
2009/02/26 Javascript
基于jQuery的为attr添加id title等效果的实现代码
2011/04/20 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
2014/04/30 Javascript
在页面加载完成后通过jquery给多个span赋值
2014/05/21 Javascript
JQuery实现鼠标滚轮滑动到页面节点
2015/07/28 Javascript
漂亮! js实现颜色渐变效果
2016/08/12 Javascript
Bootstrap基本组件学习笔记之分页(12)
2016/12/08 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
2018/03/08 Javascript
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
Eclipse + Python 的安装与配置流程
2013/03/05 Python
python实现超简单端口转发的方法
2015/03/13 Python
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
PIL图像处理模块paste方法简单使用详解
2019/07/17 Python
pytorch下大型数据集(大型图片)的导入方式
2020/01/08 Python
python集合删除多种方法详解
2020/02/10 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
世界上最好的足球商店:Unisport
2019/03/02 全球购物
Android面试宝典
2013/08/06 面试题
中国梦演讲稿3分钟
2014/08/19 职场文书
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
法人单位适用的授权委托书
2014/09/19 职场文书
2014领导班子四风问题对照检查材料思想汇报
2014/09/21 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
费城故事观后感
2015/06/10 职场文书
信用卡工资证明范本
2015/06/19 职场文书
初中英语教学随笔
2015/08/15 职场文书
少儿励志名言(80句)
2019/08/14 职场文书