从谷歌的JavaScript编写风格中,13 点值得我们注意的

对于那些还不熟悉JavaScript的编写风格的人,谷歌提供了编写JavaScript的编写风格指南,谷歌风格指南 其中列出了编写干净、可理解代码的最佳风格实践。

对于编写有效的JavaScript来说,这些并不是硬性的、快速的规则,而只是在源文件中维护一致的、吸引人的样式选择的规则。这对于JavaScript来说尤其有趣,它是一种灵活且多变的语言,允许多种风格的选择。

谷歌和Airbnb有两个最受欢迎的编写风格指南。如果我的工作是花费大量时间编写JS,那么可以先学习这两种方法。

以下是谷歌JS风格指南中我认为最有趣和相关的13条规则:

谷歌JS风格指南处理各种各样的问题,从激烈争论的问题(制表符与空格的比较,以及分号应该如何使用这个有争议的问题),到一些更模糊的规范,这些规范令我吃惊,它们肯定会改变我以后写JS的方式。

对于每个规则,我将对规范进行总结,然后引用样式指南中的支持部分,详细描述该规则。在适用的情况下,我还将提供实践中的样式示例,并将其与不遵循规则的代码进行对比。

使用空格,而不是制表符

除了行结束符序列之外,ASCII水平空格字符(0x20)是源文件中出现在任何位置的惟一空格字符。这意味着…制表符不用于缩进

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

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

分号是必需的

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

虽然无法想象为什么会有人反对这个想法,但JS中分号的一致使用正在成为新的“空格对制表符”的争论。谷歌一惯建议结束需要使用分号。

// badletluke= {}letleia= {}[luke, leia].forEach(jedi=> jedi.father= 'vader')// goodletluke= {};letleia= {};[luke, leia].forEach((jedi) => {  jedi.father= 'vader';});

不要使用 ES6 模块

不要使用ES6模块(即导出和导入关键字),因为它们的语义还没有最终确定。注意,一旦语义完全标准,将重新定义使用的方式。

// 先别做这种事//------ lib.js ------exportfunctionsquare(x) {returnx * x;}exportfunctiondiag(x, y) {returnsqrt(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 声明。

//badvar example =42;//goodlet example =42;

箭头函数是首选

箭头函数提供了简洁的语法,并解决了this 在函数中不确定性的一些问题,与function关键字相比,更喜欢箭头函数,特别是对于嵌套函数。

老实说,我只是觉得箭头函数很棒因为它们更简洁,更美观。事实证明,它们还有一个非常重要的用途。

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

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

在复杂的字符串连接上使用模板字符串(用`分隔),特别是在涉及多个字符串文本时,模板字符串可以跨越多行。

// 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}?`;}

不要对长字符串使用 \ 来表示连续

不要在普通或模板字符串文字中使用连续行(也就是说,在字符串文字中以反斜杠结束一行)。尽管ES5允许这样做,但是如果斜杠后面有任何尾随空格,那么可能会导致一些棘手的错误,而且对读者来说不太明显。

有趣的是,谷歌和Airbnb不同意这个规则(这是Airbnb的规范)。

虽然谷歌建议连接更长的字符串(如下所示),Airbnb的风格指南基本上建议什么也不做,并允许长字符串继续,只要他们需要。

// bad (sorry, this doesn't show up well on mobile)const longString = 'This isaverylongstringthat \    far exceedsthe80column limit. It unfortunately \containslongstretchesofspaces duetohowthe\    continuedlinesare indented.';    // goodconst longString = 'This isaverylongstringthat' +    'far exceedsthe80column limit. It doesnotcontain' +    'longstretchesofspaces sincetheconcatenated' +    'strings are cleaner.';

for…of 是for 循环的首选类型

使用ES6,该语言现在有三种不同的for循环。所有的循环都可以使用,但是如果可能的话,for-of循环应该是首选的。

如果您问我,这是一个奇怪的问题,但是我认为我应该包含它,因为谷歌声明了一种首选的for循环类型,这非常有趣。

我总觉得 for...in 循环对于对象更好,而对于for...of 的更适合数组,不同场景可以使用不同方式。

虽然这里的Google规范不一定与这个想法相矛盾,但是了解他们特别喜欢这个循环还是很有趣的。

不要使用eval()

不要使用eval或function(…string)构造函数(代码加载器除外)。这些特性具有潜在的危险,而且在CSP环境中根本不起作用

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

// badletobj= { a:20, b:30};letpropName= getPropName();  // returns"a"or"b"eval( 'varresult= obj.' + propName );// goodletobj= { a:20, b:30};letpropName= getPropName();  // returns"a"or"b"letresult= obj[ propName ];  //  obj["a"] is the same as obj.a

常量应该用全大写字母命名,用下划线分隔

常量名称使用CONSTANT_CASE的格式:所有大写字母,单词由下划线分隔。

如果您绝对确信某个变量不应该更改,那么可以通过将该常量的名称大写来表示。这使得在整个代码中使用该常量时,它的不变性非常明显。

一个值得注意的例外是,如果常量是函数作用域的。在这种情况下,应该用camelCase来写。

//badconst number =5;//goodconst NUMBER =5;

每次声明一个变量

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

// badleta=1,b=2,c=3;// goodleta=1;letb=2;letc=3;

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

普通的字符串用单引号(')分隔,而不是双引号(")。

提示:如果字符串包含单引号字符,可以考虑使用模板字符串来避免转义引号。

//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`;

最后一个注意

正如我在开始时所说,这些不是强制要求。谷歌只是众多科技巨头之一,这些只是推荐。

也就是说,看看谷歌这样的公司提出的风格建议是很有趣的,这家公司雇佣了很多才华横溢的人,他们花了很多时间编写优秀的代码。

如果你想要遵循“符合谷歌的源代码”的指导原则,那么你可以遵循这些规则—但是,当然,许多人不同意这些规则,你可以随意忽略这些规则中的任何一个或所有规则。

我个人认为在很多情况下Airbnb的规范比谷歌更有吸引力。无论您对这些特定的规则采取何种立场,在编写任何类型的代码时,始终牢记风格一致性仍然很重要。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342

推荐阅读更多精彩内容