【分享】JavaScript中几套比较流行的代码风格

末蓝、 2023-06-02 12:55 14阅读 0赞

## 一、Airbnb JavaScript 风格指南 ##

这是由 Airbnb 开源的 JavaScript 代码风格指南。主要是为编写 JavaScript 代码提供规范的风格，方便开发者理解、阅读代码。在github上已经接近有90,000+Star,18,000+fork了。是目前比较流行的一套 前端开发流程规范。  
**github原文地址：** [https://github.com/airbnb/javascript][https_github.com_airbnb_javascript]  
**github中文版地址：**[https://github.com/lin-123/javascript][https_github.com_lin-123_javascript]

## 二、Google JavaScript样式指南 ##

**github原文地址：**[https://google.github.io/styleguide/jsguide.html\#formatting-block-indentation][https_google.github.io_styleguide_jsguide.html_formatting-block-indentation]  
其中 Google JavaScript样式指南的有13点是挺值得注意，在这里跟大家分享一下

#### 1、使用空格，而不是制表符 ####

> 除了行终止符序列之外，ASCII水平空格字符（0x20）是唯一出现在源文件中任何地方的空格字符。这意味着…制表符不用于缩进。

指南稍后会指定缩进应使用两个空格（而不是四个）。

// badfunction foo() {∙∙∙∙let name;}// badfunction bar() {∙let name;}// goodfunction baz() {∙∙let name;}

#### 2、需要分号 ####

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

尽管我无法想象为什么有人会反对这个想法，但是在JS中对分号的一致使用正成为新的“空格与制表符”辩论。Google在捍卫分号方面坚定地走在这里。

// badlet luke = {}let leia = {}[luke, leia].forEach(jedi => jedi.father = 'vader')

// goodlet luke = {};let leia = {};[luke, leia].forEach((jedi) => { jedi.father = 'vader';});

#### 3、暂不使用ES6模块 ####

> 尚未使用ES6模块（即exportand import关键字），因为它们的语义尚未最终确定。请注意，一旦语义完全标准，该政策将被重新考虑。

// Don't do this kind of thing yet:

//------ lib.js ------export function square(x) { return x * x;}export function diag(x, y) { return sqrt(square(x) + square(y));}//------ main.js ------import { square, diag } from 'lib';

#### 4、不建议水平对齐（但不禁止） ####

> 允许这种做法，但Google风格通常不鼓励这样做。甚至不需要在已经使用过的地方保持水平对齐。

水平对齐是在代码中添加可变数量的其他空格的一种做法，以使某些标记直接出现在前几行中某些其他标记的下方。

// bad{ tiny: 42, longer: 435, };

// good{ tiny: 42, longer: 435,};

#### 5、不再使用var ####

> 用const或声明所有局部变量let。默认情况下使用const，除非需要重新分配变量。将var不得使用关键字。

我仍然看到人们var在StackOverflow和其他地方的代码示例中使用。我不能说是否有人会为此辩护，或者仅仅是因为旧习惯在不断消亡。

// badvar example = 42;

// goodlet example = 42;

#### 6、首选箭头功能 ####

> 箭头函数提供了简洁的语法并解决了许多问题this。优先使用箭头功能而不是function关键字，特别是对于嵌套功能

老实说，我只是认为箭头功能很棒，因为它们更简洁，更美观。事实证明，它们也起到了非常重要的作用。

// bad[1, 2, 3].map(function (x) { const y = x + 1; return x * y;});// good[1, 2, 3].map((x) => { const y = x + 1; return x * y;});

#### 7、使用模板字符串而不是串联 ####

> \`在复杂的字符串连接上使用模板字符串（以分隔），尤其是在涉及多个字符串文字的情况下。模板字符串可能跨越多行。

// badfunction sayHi(name) { return 'How are you, ' + name + '?';}// badfunction sayHi(name) { return ['How are you, ', name, '?'].join();}// badfunction sayHi(name) { return `How are you, ${ name }?`;}// goodfunction sayHi(name) { return `How are you, ${name}?`;}

#### 8、不要对长字符串使用换行符 ####

> 请勿在普通或模板字符串文字中使用换行符（即，在字符串文字中的行以反斜杠结束）。即使ES5允许这样做，但如果在斜杠后出现任何尾随空格，则可能会导致棘手的错误，并且对读者而言不太明显。

有趣的是，这是Google和Airbnb意见不一致的一条规则（这是Airbnb的规格）。

虽然Google建议串联较长的字符串（如下所示），但Airbnb的样式指南建议实质上不做任何事情，并允许长字符串在需要时继续使用。

// bad (sorry, this doesn't show up well on mobile)const longString = 'This is a very long string that \ far exceeds the 80 column limit. It unfortunately \ contains long stretches of spaces due to how the \ continued lines are indented.';

// goodconst longString = 'This is a very long string that ' + 'far exceeds the 80 column limit. It does not contain ' + 'long stretches of spaces since the concatenated ' + 'strings are cleaner.';

#### 9、“ for…of”是“ for loop”的首选类型 ####

> 使用ES6，该语言现在具有三种不同的for循环。所有可以使用，但for- of循环应首选在可能的情况。  
> 如果您问我，这很奇怪，但是我想我将其包括在内，因为Google声明了首选的for循环类型非常有趣。

我总是给人以这样的印象：for… in循环更适合对象，而for… of更适合数组。一种“适合正确工作的正确工具”类型的情况。

尽管Google的规范不一定与该思想相抵触，但有趣的是，他们特别喜欢此循环。

#### 10、不要使用eval（） ####

> 不要使用eval或Function(…string)构造函数（代码加载器除外）。这些功能具有潜在的危险，根本无法在CSP环境中使用。

该MDN页的eval()甚至有一段名为“不要使用eval！”

// badlet obj = { a: 20, b: 30 };let propName = getPropName(); // returns "a" or "b"eval( 'var result = obj.' + propName );

// goodlet obj = { a: 20, b: 30 };let propName = getPropName(); // returns "a" or "b"let result = obj[ propName ]; // obj[ "a" ] is the same as obj.a

#### 11、常量应以ALL\_UPPERCASE命名，并用下划线分隔 ####

> 常量名称使用CONSTANT\_CASE：所有大写字母，单词之间用下划线分隔。

如果您绝对确定不应该更改变量，则可以通过大写常量名称来表明这一点。在整个代码中使用常量时，这使常量的不变性显而易见。

该规则的一个显着例外是常量是否是函数范围的。在这种情况下，应使用camelCase编写。

// badconst number = 5;

// goodconst NUMBER = 5;

#### 12、每个声明一个变量 ####

> 每个局部变量声明仅声明一个变量：let a = 1, b = 2;不使用诸如的声明。

// badlet a = 1, b = 2, c = 3;

// goodlet a = 1;let b = 2;let c = 3;

#### 13、使用单引号，而不是双引号 ####

> 普通字符串文字用单引号（’）而不是双引号（"）分隔。

> 提示：如果字符串包含单引号字符，请考虑使用模板字符串，以避免不得不对引号进行转义。

// badlet directive = "No identification of self or mission."

// badlet saying = 'Say it ain\u0027t so.';

// goodlet directive = 'No identification of self or mission.';

// goodlet saying = `Say it ain't so`;

> 该文章翻译自：[https://www.freecodecamp.org/news/google-publishes-a-javascript-style-guide-here-are-some-key-lessons-1810b8ad050b/][https_www.freecodecamp.org_news_google-publishes-a-javascript-style-guide-here-are-some-key-lessons-1810b8ad050b]

--------------------

**如果您也正在学习前端的路上，记得关注该博主，学习更多关于前端的知识~  
如果该文章对您有所帮助，记得点个赞再走哟~谢谢**

[https_github.com_airbnb_javascript]: https://github.com/airbnb/javascript
[https_github.com_lin-123_javascript]: https://github.com/lin-123/javascript
[https_google.github.io_styleguide_jsguide.html_formatting-block-indentation]: https://google.github.io/styleguide/jsguide.html#formatting-block-indentation
[https_www.freecodecamp.org_news_google-publishes-a-javascript-style-guide-here-are-some-key-lessons-1810b8ad050b]: https://www.freecodecamp.org/news/google-publishes-a-javascript-style-guide-here-are-some-key-lessons-1810b8ad050b/