现如今最流行的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 相关文章推荐
DIV菜单层实现代码
Nov 19 Javascript
JQuery实现简单时尚快捷的气泡提示插件
Dec 20 Javascript
浅析JQuery中的html(),text(),val()区别
Sep 01 Javascript
JS获取鼠标坐标位置实例分析
Jan 20 Javascript
利用vue实现模态框组件
Dec 19 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
Mar 30 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
May 15 Javascript
详解vue项目中使用token的身份验证的简单实践
Mar 08 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
Jun 27 Javascript
JS/CSS实现字符串单词首字母大写功能
Sep 03 Javascript
js实现左右轮播图
Jan 09 Javascript
vue实现购物车的监听
Apr 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类型约束用法示例
2016/09/28 PHP
PHP数组相加操作及与array_merge的区别浅析
2016/11/26 PHP
PHP AjaxForm提交图片上传并显示图片源码
2016/11/29 PHP
JS Array对象入门分析
2008/10/30 Javascript
nodejs中使用多线程编程的方法实例
2015/03/24 NodeJs
js+html5实现canvas绘制圆形图案的方法
2015/06/05 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
2016/12/13 Javascript
H5实现中奖记录逐行滚动切换效果
2017/03/13 Javascript
关于Vue.nextTick()的正确使用方法浅析
2017/08/25 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
jQuery与vue实现拖动验证码功能
2018/01/30 jQuery
关于TypeScript模块导入的那些事
2018/06/12 Javascript
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
详解vue-cli脚手架中webpack配置方法
2018/08/22 Javascript
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
jQuery实现电梯导航模块
2020/12/22 jQuery
利用soaplib搭建webservice详细步骤和实例代码
2013/11/20 Python
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
跟老齐学Python之模块的加载
2014/10/24 Python
python实现kNN算法
2017/12/20 Python
python机器学习理论与实战(一)K近邻法
2021/01/28 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
Python实现病毒仿真器的方法示例(附demo)
2020/02/19 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
如何在pycharm中安装第三方包
2020/10/27 Python
化工专业个人的求职信范文
2013/11/28 职场文书
运动会入场词60字
2014/02/15 职场文书
《画杨桃》教学反思
2014/04/13 职场文书
2014年小学国庆节活动方案
2014/09/16 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
优秀班主任材料
2014/12/16 职场文书
Win11局域网共享权限在哪里设置? Win11高级共享的设置技巧
2022/04/05 数码科技