从谷歌的JavaScript编写作风中,13 点值得我们注重的!

《从谷歌的JavaScript编写作风中,13 点值得我们注重的!》

文中的
指原文的作者

想浏览更多优良文章请猛戳GitHub博客,一年百来篇优良文章等着你!

关于那些还不熟习JavaScript的编写作风的人,谷歌供应了编写JavaScript的编写作风指南,谷歌作风指南 个中列出了编写清洁、可理解代码的最好作风实践。

关于编写有用的JavaScript来讲,这些并非硬性的、疾速的划定规矩,而只是在源文件中保护一致的、吸引人的款式挑选的划定规矩。这关于JavaScript来讲迥殊风趣,它是一种天真且多变的言语,许可多种作风的挑选。

谷歌和Airbnb有两个最受迎接的编写作风指南。假如我的事情是消费大批时候编写JS,那末能够先进修这两种要领。

以下是谷歌JS作风指南中我以为最风趣和相干的13条划定规矩:

谷歌JS作风指南处置惩罚林林总总的题目,从猛烈争辩的题目(制表符与空格的比较,以及分号应当怎样运用这个有争议的题目),到一些更隐约的范例,这些范例令我受惊,它们肯定会转变我今后写JS的体式格局。

关于每一个划定规矩,我将对范例举行总结,然后援用款式指南中的支撑部份,详细描述该划定规矩。在实用的情况下,我还将供应实践中的款式示例,并将其与不遵照划定规矩的代码举行对照。

运用空格,而不是制表符

除了行完毕符序列以外,ASCII程度空格字符(0x20)是源文件中出如今任何位置的唯一空格字符。这意味着…制表符不用于缩进

运用两个空格(而不是四个)举行缩进

// bad
function foo() {
∙∙∙∙let name;
}

// bad
function bar() {
∙let name;
}

// good
function baz() {
∙∙let name;
}

分号是必需的

每一个语句必需以分号完毕,制止依托自动分号插进去。

虽然没法设想为何会有人阻挡这个主意,但JS中分号的一致运用正在成为新的“空格对制表符”的争辩。谷歌一惯发起完毕须要运用分号。

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

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

不要运用 ES6 模块

不要运用ES6模块(即导出和导入关键字),由于它们的语义还没有终究肯定。注重,一旦语义完整规范,将从新定义运用的体式格局。

// 先别做这类事
//------ 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';


不勉励(但不制止)程度对齐

这类做法是许可的,但
谷歌编写作风一般不勉励如许做,甚至不须要在已运用它的处所坚持程度对齐。

程度对齐是在代码中增加可变数目的分外空格,以使某行变量的值与前面变量值对齐。

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

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

不要再运用 var 了

运用const或let声明一切当地变量来替代 var。默许情况下运用 const,除非须要从新分配变量在运用 let 声明。

// bad
var example = 42;

// good
let example = 42;

箭头函数是首选

箭头函数供应了简约的语法,并处理了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;
});

运用模板字符串而不是拼接客串

在庞杂的字符勾通接上运用模板字符串(用`分开),迥殊是在触及多个字符串文本时,模板字符串能够逾越多行。

// bad
function sayHi(name) {
  return 'How are you, ' + name + '?';
}

// bad
function sayHi(name) {
  return ['How are you, ', name, '?'].join();
}

// bad
function sayHi(name) {
  return `How are you, ${ name }?`;
}

// good
function sayHi(name) {
  return `How are you, ${name}?`;
}

不要对长字符串运用 \ 来示意一连

不要在一般或模板字符串笔墨中运用一连行(也就是说,在字符串笔墨中以反斜杠完毕一行)。只管ES5许可如许做,然则假如斜杠背面有任何跟随空格,那末能够会致使一些辣手的毛病,而且对读者来讲不太显著。

风趣的是,谷歌和Airbnb差别意这个划定规矩(这是Airbnb的范例)。

虽然谷歌发起衔接更长的字符串(以下所示),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.';
    
// good
const 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.';

for…of 是for 轮回的首选范例

运用ES6,该言语如今有三种差别的for轮回。一切的轮回都能够运用,然则假如能够的话,for-of轮回应当是首选的。

假如您问我,这是一个新鲜的题目,然则我以为我应当包括它,由于谷歌声清楚明了一种首选的for轮回范例,这异常风趣。

我总以为 for…in 轮回关于对象更好,而关于for…of 的更适合数组,差别场景能够运用差别体式格局。

虽然这里的Google范例不一定与这个主意相抵牾,然则相识他们迥殊喜好这个轮回照样很风趣的。

不要运用eval()

不要运用eval或function(…string)组织函数(代码加载器除外)。这些特征具有潜伏的风险,而且在CSP环境中基础不起作用

MDN 页面的eval()中,甚至有一个名为“不要运用eval!”

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

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

常量应当用全大写字母定名,用下划线分开

常量称号运用CONSTANT_CASE的花样:一切大写字母,单词由下划线分开。

假如您相对确信某个变量不应当变动,那末能够经由过程将该常量的称号大写来示意。这使得在全部代码中运用该常量时,它的不变性异常显著。

一个值得注重的破例是,假如常量是函数作用域的。在这类情况下,应当用camelCase来写。

// bad
const number = 5;

// good
const NUMBER = 5;

每次声明一个变量

每一个局部变量声明只声明一个变量:声明如令a = 1, b = 2,不引荐。

// bad
let a = 1, b = 2, c = 3;

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

运用单引号,而不是双引号

一般的字符串用单引号(‘)分开,而不是双引号(“)。

提醒:假如字符串包括单引号字符,能够斟酌运用模板字符串来防止转义引号。

// bad
let directive = "No identification of self or mission."
// bad
let saying = 'Say it ain\u0027t so.';

// good
let directive = 'No identification of self or mission.';
// good
let saying = `Say it ain't so`;

末了一个注重

正如我在开始时所说,这些不是强迫请求。谷歌只是浩瀚科技巨子之一,这些只是引荐。

也就是说,看看谷歌如许的公司提出的作风发起是很风趣的,这家公司雇佣了许多才华横溢的人,他们花了许多时候编写优异的代码。

假如你想要遵照“相符谷歌的源代码”的指点准绳,那末你能够遵照这些划定规矩—然则,固然,许多人差别意这些划定规矩,你能够随便疏忽这些划定规矩中的任何一个或一切划定规矩。

我个人以为在许多情况下Airbnb的范例比谷歌更有吸引力。不管您对这些特定的划定规矩采用何种态度,在编写任何范例的代码时,一直切记作风一致性依然很主要。

原文:13 Noteworthy Points from Google’s JavaScript Style Guide

你的点赞是我延续分享好东西的动力,迎接点赞!

交换

干货系列文章汇总以下,以为不错点个Star,迎接 加群 互相进修。

https://github.com/qq44924588…

我是小智,民众号「大迁天下」作者,对前端手艺坚持进修爱好者。我会常常分享本身所学所看的干货,在进阶的路上,共勉!

关注民众号,背景复兴福利,即可看到福利,你懂的。

《从谷歌的JavaScript编写作风中,13 点值得我们注重的!》

    原文作者:前端小智
    原文地址: https://segmentfault.com/a/1190000017217896
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞