现如今最流行的JavaScript代码规范_基础知识-js教程-PHP中文网

现如今最流行的JavaScript代码规范_基础知识

php中文网

发布： 2016-05-16 16:56:14

原创

1193人浏览过

什么是最佳的JavaScript代码编程规范？这可能是一个众口难调的问题。那么，不妨换个问题，什么代码规范最流行？

sideeffect.kr通过分析GitHub上托管的开源代码，得出了一些有趣的结果。一起来看看吧。

行末逗号对行首逗号
行末引号：

复制代码代码如下:

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次提交统计。）

对象字面量中冒号周围是否有空格
冒号后有空格

易企CMS1.8

易企CMS：国内首款完全基于SEO友好性开发的营销型企业网站系统，让企业网络营销从此易如反掌。本程序特征：100%开发源代码，免费开源;后台管理操作简单易行;模板div+css标准设计,符合w3c标准，兼容主流浏览器;开发语言和数据库：PHP+Mysql。本程序亮点：从基础代码开发起完全符合SEOWHY理论的SEO规范，力图实现国内首款对SEO最友好的企业网站开源程序，为企业网络营销的巨大成功

查看详情

复制代码代码如下:

{ 
  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中函数式编程是什么_纯函数与副作用如何理解？ JavaScript async/await是什么_如何简化异步代码？ JavaScript中如何实现分页功能_数据切片展示 javascript框架是什么_为什么React、Vue如此流行？什么是JavaScript模块以及如何导出导入？