现如今最流行的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父窗口关闭时子窗口随之关闭完美解决方案
Apr 29 Javascript
jquery 新建的元素事件绑定问题解决方案
Jun 12 Javascript
浅析JQuery中的html(),text(),val()区别
Sep 01 Javascript
javascript中2个感叹号的用法实例详解
Sep 04 Javascript
jQuery中innerWidth()方法用法实例
Jan 19 Javascript
JS闭包可被利用的常见场景小结
Apr 09 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
May 10 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
May 27 Javascript
微信小程序倒计时功能实例代码
Jul 17 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
Sep 09 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
微信小程序自定义modal弹窗组件的方法详解
Dec 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
PHP和Mysqlweb应用开发核心技术-第1部分 Php基础-2 php语言介绍
2011/07/03 PHP
一个好用的PHP验证码类实例分享
2013/12/27 PHP
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
原生js写的放大镜效果
2012/08/22 Javascript
JQuery的read函数与js的onload不同方式实现
2013/03/18 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
2014/11/28 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
2015/08/28 Javascript
Nodejs学习item【入门手上】
2016/05/05 NodeJs
jQuery EasyUI右键菜单实现关闭标签/选项卡
2016/10/10 Javascript
bootstrap table实现单击单元格可编辑功能
2017/03/28 Javascript
详解如何在Vue2中实现组件props双向绑定
2017/03/29 Javascript
AngularJS获取json数据的方法详解
2017/05/27 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
2018/02/08 Javascript
security.js实现的RSA加密功能示例
2018/06/06 Javascript
vue+django实现一对一聊天功能的实例代码
2019/07/17 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
[41:20]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS DK
2014/05/26 DOTA
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
用Python和MD5实现网站挂马检测程序
2014/03/13 Python
初步介绍Python中的pydoc模块和distutils模块
2015/04/13 Python
python cx_Oracle的基础使用方法(连接和增删改查)
2017/11/19 Python
使用DataFrame删除行和列的实例讲解
2018/04/08 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
python清除字符串中间空格的实例讲解
2018/05/11 Python
python地震数据可视化详解
2019/06/18 Python
Python字符串对象实现原理详解
2019/07/01 Python
Python搭建代理IP池实现接口设置与整体调度
2019/10/27 Python
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
毕业生应聘幼儿园的自荐信
2013/11/20 职场文书
党课培训主持词
2014/04/01 职场文书
应届生求职自荐信
2014/07/04 职场文书
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python
Linux系统下MySQL配置主从分离的步骤
2022/03/21 MySQL
AngularJS实现多级下拉框
2022/03/25 Javascript