当前位置: 首页 > 科技观察

Google发布的JS代码规范你需要了解哪些?

时间:2023-03-14 08:45:10 科技观察

Google为那些还不熟悉编码规范的人发布了一个JS编码规范。它列出了编写简洁易懂的代码的最佳实践。编码标准不是编写正确JavaScript代码的规则,而是保持源代码编写模式一致的选择。对于JavaScript语言尤其如此,因为它灵活且约束较少,允许开发人员使用许多不同的编码风格。谷歌和Airbnb各自占据了当前最先进编码标准的一半。如果你打算投入大量时间编写JS代码,我强烈建议你通读一下这两家公司的编码标准。接下来要写的是Google的代码规范中我个人认为与日常开发息息相关的13条规则。它们处理非常有争议的问题,包括制表符和空格,是否强制使用分号,等等。还有一些规则让我很吃惊,经常***改变了我写JS代码的习惯。对于每一条规则,我都会先给出规范的总结,然后再参考规范中的详细规范。我还将给出一些适当的反例来说明遵循这些规则的重要性。使用空格而不是制表符除了每行的终止符序列之外,ASCII水平空格字符(0x20)是唯一可以出现在源文件中任何位置的空格字符。这也意味着制表符不应该被用来控制缩进。规范然后指出缩进应该用2个而不是4个空格来实现。//badfunctionfoo(){????letname;}//badfunctionbar(){?letname;}//goodfunctionbaz(){??letname;}不能省略分号每个语句必须以分号结尾。依赖JS自动加分号的特性是不允许的。虽然我不明白为什么有人会反对这条规则,但如今分号的使用显然与“空格与制表符”的问题一样具有巨大的争议性。而且谷歌说分号是必须的,不能省略。//badletluke={}letleia={}[luke,leia].forEach(jedi=>jedi.father='vader')//goodletluke={};letleia={};[luke,leia].forEach((jedi)=>{jedi.father='vader';});暂时不要使用ES6模块。由于ES6模块的语义还没有完全确定,所以暂时不要使用它们,比如export和import关键字。一旦他们的规范完成,请忽略此规则。//先不要写下面的代码://------lib.js------exportfunctionsquare(x){returnx*x;}exportfunctiondiag(x,y){returnsqrt(square(x)+square(y));}//---main.js------import{square,diag}from'lib';译者注:感觉按照这个规范不太现实,之后all,现在已经有babel了。而在使用React时,最佳实践是使用ES6模块。不建议水平对齐代码Google的代码指南允许但不建议水平对齐代码。即使在之前的代码中做了水平对齐,以后也应该避免这种行为。水平对齐代码会在代码中添加一些额外的空格,这会使相邻两行上的字符看起来在一条垂直线上。//坏{tiny:42,longer:435,};//好{tiny:42,longer:435,};杜绝var使用const或let来声明所有的局部变量。如果变量不需要重新赋值,默认使用const。应拒绝关键字var。不知道是因为没人能说服他们,还是因为积习难改。目前我仍然可以看到很多人在StackOverFlow或其他地方使用var来声明变量。//badvarexample=42;//goodconstexample=42;优先使用箭头函数箭头函数提供了简洁的语法,避免了关于this指向的一些问题。与function关键字相比,开发人员应该更喜欢使用箭头函数来声明函数,尤其是声明嵌套函数。坦白说,我曾经认为箭头函数只是为了简单和美观。但现在我发现他们有更重要的作用。//坏[1,2,3].map(function(x){consty=x+1;returnx*y;});//好[1,2,3].map((x)=>{consty=x+1;returnx*y;});使用模板字符串而不是连接字符串在处理多行字符串时,模板字符串比复杂的连接字符串表现更好。//badfunctionsayHi(name){return'Howareyou,'+name+'?';}//badfunctionsayHi(name){return['Howareyou,',name,'?'].join();}//badfunctionsayHi(name){return`Howareyou,${name}?`;}//goodfunctionsayHi(name){return`Howareyou,${name}?`;}不要用续符分割长字符串在JS中,\也代表续符.Google的代码指南不允许在模板字符串或常规字符串中使用续行符。虽然这在ES5中是允许的,但如果\后跟某些结束空白字符,这种行为可能会导致在审查代码时很难注意到的错误。这条规则很有意思,因为Airbnb的规范中有一条不同的规则。Google推荐如下写法,Airbnb则认为顺其自然,不加特殊处理,该怎样就怎样。//bad(建议在PC端阅读)constlongString='Thisisaverylongstringthat\farexceedsthe80columnlimit.Itunfortunately\containslongstretchesofspacesduetohowthe\continuedlinesareindented.';//goodconstlongString='Thisisaverylongstringthat'+'farexceedsthe80columnlimit.Itdoesnotcontain'+'longstretchesofspacessincetheconcatenated'+'stringsarecleaner.';优先使用for...of在ES6中,有3种不同的for循环。尽管每个都有其用例,但Google仍然建议使用for...of。有趣的是谷歌如何指定一个for循环。这虽然奇怪,但不影响我接受这个观点。以前一直觉得for...in适合遍历Object,for...of适合遍历数组。因为我喜欢这种各司其职的方式。我发现谷歌对for...的偏好很有趣,尽管谷歌的规范与这种用法有冲突。不要使用eval语句,除非它在代码加载器中,否则不要使用eval或Function(...string)结构。此功能具有潜在危险,无法在CSP环境中使用。MDN中有一节专门说不要使用eval语句。//badletobj={a:20,b:30};letpropName=getPropName();//返回“a”或“b”eval('varresult=obj.'+propName);//goodletobj={a:20,b:30};letpropName=getPropName();//returns"a"or"b"letresult=obj[propName];//obj["a"]isthesameasobj.a常量命名约定常量命名应全部大写,并用下划线隔开如果你确定一个变量的值以后不会被修改,你可以把它的名字重写成全部大写,暗示这是一个常量,请不要修改它的值。遵循此规则时需要注意的一件事是,如果常量是一个函数,则应使用驼峰命名法。//badconstnumber=5;//goodconstNUMBER=5;一次只声明一个变量每个变量声明应该只对应一个变量。像leta=1,b=2;这样的语句不应该出现。//badleta=1,b=2,c=3;//goodleta=1;letb=2;letc=3;使用单引号只允许普通字符串用单引号包起来,禁止使用双引号。如果字符串包含单引号字符,则应使用模板字符串。//badletdirective="Noidentificationofselfmission."//badletsaying='Sayitain\u0027tso.';//goodletdirective='Noidentificationofselfmission.';//goodletsaying=`Sayitain'tso`;总结正如我开头所说,规范中没有强制命令。虽然谷歌是科技巨头之一,但此代码规范仅作为参考。谷歌是一家拥有众多人才的科技公司,聘请优秀的程序员来编写优秀的代码。看到这样一家公司出的代码规范,很有意思。如果你想实现谷歌风格的代码,那么你可以在项目中制定这些规范。但是你可能不认同这个代码规范,此时没有人会阻止你放弃一些规则。我个人认为在某些场景下,Airbnb的代码规范要好于Google的代码规范。但是不管你支持哪一种,也不管你写的是什么类型的代码,最重要的是始终遵守你心目中相同的代码规范。