现如今最流行的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如何判断客户端是PC还是手持设备简单分析
Nov 22 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
Mar 15 Javascript
终于解决了IE8不支持数组的indexOf方法
Apr 03 Javascript
谈谈JavaScript中的几种借用方法
Aug 09 Javascript
jQuery动态增减行的实例代码解析(推荐)
Dec 05 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
JavaScript中三种常见的排序方法
Feb 24 Javascript
AngularJs 常用的过滤器
May 15 Javascript
Angular实现响应式表单
Aug 04 Javascript
jQuery ajax调用webservice注意事项
Oct 08 jQuery
openlayers4实现点动态扩散
Aug 17 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
Oct 22 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面向对象中常用的关键字和魔术方法
2017/02/04 PHP
深入讲解PHP的对象注入(Object Injection)
2017/03/01 PHP
Laravel基础_关于view共享数据的示例讲解
2019/10/14 PHP
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
Javascript 去除数组的重复元素
2010/05/04 Javascript
javascript 45种缓动效果 非常酷
2011/06/28 Javascript
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
轻松掌握JavaScript策略模式
2016/08/25 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
2017/07/06 Javascript
Bootstrap 中data-[*] 属性的整理
2018/03/13 Javascript
layui 设置table 行的高度方法
2018/08/17 Javascript
对VUE中的对象添加属性
2018/09/18 Javascript
React 使用Hooks简化受控组件的状态绑定
2019/03/18 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
2019/05/05 Javascript
深入学习js函数的隐式参数 arguments 和 this
2019/06/24 Javascript
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
python开发之字符串string操作方法实例详解
2015/11/12 Python
python编程通过蒙特卡洛法计算定积分详解
2017/12/13 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
Python多继承原理与用法示例
2018/08/23 Python
使用Python实现文字转语音并生成wav文件的例子
2019/08/08 Python
Python在OpenCV里实现极坐标变换功能
2019/09/02 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
HTML5在a标签内放置块级元素示例代码
2013/08/23 HTML / CSS
GUESS德国官网:美国牛仔服装品牌
2017/02/14 全球购物
黄色火烈鸟:De Gele Flamingo
2019/03/18 全球购物
英国奢侈品概念店:Base Blu
2019/05/16 全球购物
阿姆斯特丹城市卡:Amsterdam Pass
2019/12/01 全球购物
某公司面试题
2012/03/05 面试题
后勤采购员岗位职责
2013/12/19 职场文书
党员批评与自我批评(5篇)
2014/09/23 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
MySQL中order by的执行过程
2022/06/05 MySQL