JavaScript主流代码规范大对比

3,960 阅读8分钟

作为一个程序员,肯定希望能写出一手好代码,看起来赏心悦目,又易于理解。既方便日后自己回来翻阅一眼就能明白代码在干什么,又能让接手的人很快上手,看到精妙的地方,不由自主地发出由衷的感叹,悄无声息地改变别人不好的习惯。

什么是编码规范?🤓

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

我们为什么需要编码规范? 😎

一个主要的原因是:每个人写代码的方式都是不同的。我可能喜欢这么写,而你喜欢用另一种方法写。如果我们只处理自己的代码,这样并没有什么问题。但如果有很多的程序员同时在一个代码库上面工作呢?如果没有规范,事情很快会变得一团糟。代码规范可以让新人迅速的熟悉相关的代码,并且也能写出让其他程序员简单易懂的代码。不同的公司有着不同的规范,但追求的目标是相同的,就是统一代码编写风格,提高工作效率。通过阅读不同的编码规范,你可以知道在各个公司里代码是如何编写的。

1.Airbnb JavaScript Style Guide

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

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

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

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

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

2.JavaScript Standard Style Guide

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

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

再也不用维护 .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代码习惯。