JavaScript主流代码规范大对比

时间 2019-11-17

原文原文链接

做为一个程序员，确定但愿能写出一手好代码，看起来赏心悦目，又易于理解。既方便往后本身回来翻阅一眼就能明白代码在干什么，又能让接手的人很快上手，看到精妙的地方，不禁自主地发出由衷的感叹，悄无声息地改变别人很差的习惯。javascript

什么是编码规范？🤓

编码规范就是指导如何编写和组织代码的一系列标准。核心原则是：代码应该简洁易懂，逻辑清晰，优先保证程序的正确性。html

咱们为何须要编码规范？ 😎

一个主要的缘由是：每一个人写代码的方式都是不一样的。我可能喜欢这么写，而你喜欢用另外一种方法写。若是咱们只处理本身的代码，这样并无什么问题。但若是有不少的程序员同时在一个代码库上面工做呢？若是没有规范，事情很快会变得一团糟。代码规范可让新人迅速的熟悉相关的代码，而且也能写出让其余程序员简单易懂的代码。不一样的公司有着不一样的规范，但追求的目标是相同的，就是统一代码编写风格，提升工做效率。经过阅读不一样的编码规范，你能够知道在各个公司里代码是如何编写的。java

1.Airbnb JavaScript Style Guide

号称是“最合理的编写 JavaScript 代码的方式”。git

Airbnb 是一家位于美国旧金山的公司，本文是其内部的 JavaScript编码规范，写得比较全面程序员

在 Github 上有 88,897+ ⭐️，1,7152 + Fork，几乎覆盖了JavaScript的每一项特性。github

地址: https://github.com/airbnb/javascriptapi

中文版地址: https://github.com/lin-123/javascript数组

2.JavaScript Standard Style Guide

一个功能强大的 JavaScript 代码规范，自带 linter 和自动代码纠正，无需配置，自动格式化代码、提早发现风格及程序问题。浏览器

本规范特色之一是简洁。谁也不想为每一个项目维护一份有成百上千行语句的代码风格配置文件。有此规范就够了。app

不再用维护 .eslintrc, .jshintrc, or .jscsrc 。开箱即用。

这个代码规范被不少知名公司所采用，好比 NPM、GitHub、mongoDB 等。

若是我不一样意某条规则，能够改吗？不能够，制定这套 standard 规范的目的就是让你们都没必要再花时间浪费在无谓的代码风格之争上面了。 github上有 22,392+ ⭐️，1,702+ Fork

地址：https://github.com/standard/standard（这个 Github 地址霸气到不行。）

3.Google JavaScript Style Guide

只有遵照了这里的规则，一个 JavaScript 源文件才能被称为“Google Style”。很霸气，我行我素，同时也被很多公司沿用。

地址：https://google.github.io/styleguide/jsguide.html

这几种主流的JavaScript规范到底有什么区别呢？

关于缩进

Google: 2个空格

Airbnb: 2个空格

Standard: 2个空格

字符窜单双引号

Airbnb：单引号定义字符窜使用模板字符串取代链接字符串

Standard: 单引号定义字符串使用模板字符串取代链接字符串

Google: 使用单引号使用模板字符串取代链接字符串

var let const

Google: 默认使用const let 。杜绝var。

Standard: 不容许存在冗余变量,每一个 var 关键字单独声明一个变量。

Airbnb: 使用let const.

Object && Array

Airbnb:

// bad
const item = new Object();
// bad
const items = new Array();

// good
const item = {};
// good
const items = [];
复制代码

Standard:

var nums = new Array(1, 2, 3)   // ✗ avoid
var nums = [1, 2, 3]            // ✓ ok
复制代码

行末逗号

Airbnb:

// good
const hero = {
  firstName: 'Ada',
  lastName: 'Lovelace',
  birthYear: 1815,
  superPower: 'computers',
};
复制代码

Standard: 始终将逗号置于行末 && 不容许有多余的行末逗号,

// ✓ ok
var list = [1, 2, 3, 4]

var obj = {
  message: 'hello',   // ✗ avoid
}
复制代码

Google：请在末尾加上逗号。

关于分号（最有争议的）

Airbnb：加分号 Why? 当 JavaScript 遇到没有分号结尾的一行，它会执行自动插入分号 Automatic Semicolon Insertion这一规则来决定行末是否加分号。若是JavaScript在你的断行里错误的插入了分号，就会出现一些古怪的行为。当新的功能加到JavaScript里后，这些规则会变得更复杂难懂。显示的结束语句，并经过配置代码检查去捕获没有带分号的地方能够帮助你防止这种错误。

standard: 无分号--这没有什么很差不骗你！可是，不要使用 (, [, or 等做为一行的开始。在没有分号的状况下代码压缩后会致使报错，而坚持这一规范则可避免出错。当前主流的代码压缩方案都是基于词法（AST-based）进行的，因此在处理无分号的代码时彻底没有压力（况且 JavaScript 中分号原本就不是强制的）。

Google：每一个语句必须以分号结尾。禁止依靠自动分号插入。

关于各类空格

Airbnb:

function test() {
  console.log('test');
} 

// good
if (isJedi) {
  fight();
}

// good
const x = y + 5;

// good
function bar(foo) {
  return foo;
}

// good
var obj = { "foo": 42 };

//在行的末尾避免使用空格
//避免使用多个空行
复制代码

standard:

if (condition) { ... }
funtion name (arg) { ... }
var list = [1, 2, 3, 4]
function greet (name, options) { ... }
//单行代码块两边加空格
function foo () { return true }  // ✓ ok
//comment // ✗ avoid
// comment // ✓ ok
单行代码块两边加空格
function foo () {return true}    // ✗ avoid
function foo () { return true }  // ✓ ok
/*comment*/         // ✗ avoid
/* comment */       // ✓ ok
复制代码

比较运算符和等号

使用 ==== 和 !== 而不是 == !=
airbnb: yes
standard: yes,但在须要检查 null || undefined 时可使用 obj == null。

三目表达式

Airbnb: const foo = maybe1 > maybe2 ? 'bar' : maybeNull;
standard: ? 和 : 与他们所负责的代码处于同一行

// ✓ ok
var location = env.development ? 'localhost' : 'www.api.com'

// ✓ ok
var location = env.development
  ? 'localhost'
  : 'www.api.com'
复制代码

文件结尾

Airbnb: 文件结尾空一行
google: 文件以空行结尾
standard:文件末尾留一空行。

冗余变量

Airbnb: 不容许
google: 不容许
standard:不容许

关于函数和变量命名

Airbnb: 变量和函数名统一使用驼峰命名法
Google: 每次只声明一个变量，常量命名应该使用全大写格式，并用下划线分割。若是这个常量是一个函数，那么应该使用驼峰式命名法
standard: 对于变量和函数名统一使用驼峰命名法。不能包含下划线。

不要使用eval语句

Airbnb: ✔️
Google: ✔️
standard: ✔️

各自奇特的地方：

Google规范：

禁止使用ES6模块（不得出现export和import命令）这意味着，谷歌不使用 React，由于没了ES6模块，React无法写。我好奇查了一下，Angular果真不使用ES6模块。
优先使用for...of。
不推荐代码水平对齐。
...

Standard规范

不要对变量使用 delete 操做
避免使用常量做为条件表达式的条件
不要扩展原生对象。
不要省去小数点前面的0。
new 建立对象实例后须要赋值给变量。
禁止使用 Symbol 构造器。
使用 this 前请确保 super() 已调用。
检查 NaN 的正确姿式是使用 isNaN()。
使用浏览器全局变量时必须加window前缀
对象字面量中不要定义重复的属性。
switch 语句中不要定义重复的 case 分支。
同一模块有多个导入时一次性写完。
正则中不要使用空字符。
不要解构空值。
避免没必要要的布尔转换。
不要使用多余的括号包裹函数。
switch 必定要使用 break 来将条件分支正常中断。
避免使用 arguments.callee 和 arguments.caller。
避免对声明过的函数从新赋值。
不要对全局只读对象从新赋值。
嵌套的代码块中禁止再定义函数。
禁止使用 Function 构造器。
return 语句中的赋值必需有括号包裹。
避免将变量赋值给本身。
禁止使用稀疏数组（Sparse arrays）。
若是有更好的实现，尽可能不要使用三元表达式。
return，throw，continue 和 break 后不要再跟代码。
避免没必要要的 .call() 和 .apply()。
一元运算符后面跟一个空格。typeof !admin
...

Airbnb

不要对参数从新赋值
不要直接调用Object.prototype上的方法，如
hasOwnProperty, propertyIsEnumerable, isPrototypeOf。
对象浅拷贝时，更推荐使用扩展运算符[就是...运算符]，而不是Object.assign。
不要用函数构造器建立函数
不要改参数
不要对参数从新赋值。
不要使用一元自增自减运算符（++， --）而是 num += 1;
不要用前置或后置下划线。Why? JavaScript 没有私有属性或私有方法的概念。尽管前置下划线一般的概念上意味着“private”，事实上，这些属性是彻底公有的，所以这部分也是你的API的内容。这一律念可能会致使开发者误觉得更改这个不会致使崩溃或者不须要测试。若是你想要什么东西变成“private”，那就不要让它在这里出现。
当你必定要用函数表达式（在回调函数里）的时候就用箭头表达式吧
经常使用class，避免直接操做prototype
不要用import通配符，就是 * 这种方式
不要用遍历器。用JavaScript高级函数代替for-in、 for-of。
访问属性时使用点符号. ，当获取的属性是变量时用方括号[]取
作幂运算时用幂操做符 ** 。
if表达式的else和if的关闭大括号在一行
全部注释开头空一个，方便阅读。
在一个代码块后下一条语句前空一行。
不要在代码之间使用多个空白行填充。
jQuery对象用$变量表示。
不要保存引用this，用箭头函数或函数绑定——Function#bind.
简称和缩写应该所有大写或所有小写。 HTTPRequests
...

结语：此文只是罗列了代码中比较常见的JavaScript语法规范，更多细节的规范还须要反复阅读规范原文，不断熟悉规范，💁若是你（我）要在编写JS上投入很长时间的话，我强烈建议推荐通读这几家公司编写的代码规范，每每最后能能够改变你的编写JS代码习惯。