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

编写漂亮JavaScript代码的十大风格规则

时间:2023-03-22 13:02:16 科技观察

你知道为什么那么多人讨厌PHP吗?这主要是因为它的外观。PHP可以做任何它想做的事,所以这使它变得丑陋。因为PHP的创建者没有为PHP建议任何大小写或格式。一些开发人员使用under_score而其他开发人员使用PascalCase。所以这种不一致最终导致了对PHP的巨大仇恨。幸运的是,JavaScript不是这种情况,因为编写JavaScript代码有一些官方规则。例如,camelCase是官方推荐的JavaScript套写方式。然而,将这些样式规则提升到一个新的水平并为JavaScript创建一个通用的视觉效果是至关重要的,原因如下:在整个代码库中保持一致的样式可以使其易于阅读和修改。当另一个JS开发人员看到你写的代码时,他/她不会感到不舒服,因为一切都很熟悉。随着项目的进展和您编写的代码越多,如果没有样式指南,维护和改进变得越来越困难。使用这些规则将使您的代码更具可读性和一致性。让我们开始吧。1、使用Let和Const声明变量ES2015引入了let和const关键字,用来代替var。但是var有什么问题?嗯,很多。var从一开始就存在于JavaScript中,但以今天的标准来看它有一些缺点。随着项目的发展,它可能会导致全球范围内的意外行为和污染。例如,由于var不是块作用域的,因此它也在块级标记(如if和for)之外定义。例如,迭代变量i是在循环完成后定义的。这是一个例子:vara=1;//badleta=1;//good//const和let只存在于它们定义的块中。{leta=1;常量b=1;varc=1;}console.log(a);//ReferenceErrorconsole.log(b);//ReferenceErrorconsole.log(c);//Prints12.尽可能使用隐式构造函数如果您使用JavaScript,您应该知道有很多方法可以完成相同的任务。例如,您可以使用三元组或if-else块来创建条件逻辑。这种不同的选择有时会导致您编写的代码不一致。要创建空对象,请使用对象构造函数或隐式{}。字符串、函数、数组、数字等也是如此。为了一致性和可读性,尽可能使用隐式构造函数。//badconsta=newObject();constb=newString("str");constc=newFunction('a','b','returna+b');//goodconsta={};constb="str";constc=(a,b)=>a+b;3.字符串首选单引号为了保持一致性,在所有代码库中使用单引号'而不是双引号"和模板文字(反引号)`。为了简化这个过程,你可以利用Prettier立即格式化。//badconstname="EdmonDantès";//不好——模板文字应该包含插值或换行符constname=`EdmonDantès`;//goodconstname='EdmonDantès';4.尽可能使用字符串插值正如我提到的,在JavaScript中,有有很多方法可以达到相同的结果,但其中一些比其他方法更复杂。要连接字符串,您可以使用+运算符、数组的join方法或字符串的concat方法。但是,对于此任务,使用模板文字是最复杂和最简单的。//badconststr='Howareyou,'+name+'?';//badconststr=['Howareyou,',name,'?'].join();//goodconststr=`Howareyou,${name}?`;5.选择Namedfunctionexpressions一般来说,每个人都有自己的喜好e创建函数的方式,因为JavaScript在方法方面非常慷慨。有箭头函数、匿名函数表达式、函数声明等。但是编写一致且可读的JavaScript代码,你应该在任何地方都使用类型。函数表达式没有提升,这意味着要使用一个函数,你需要先在顶部或另一个模块中定义它。此外,名称可以很长且具有描述性,从而防止单独使用注释。因此,代码将更具可读性。//badfunctionfoo(){...}//badconstfoo=function(){...};//好的//词法名称区别于变量引用的调用constshort=functionlongUniqueMoreDescriptiveLexicalFoo(){...};6.回调中优先使用箭头函数有些方法,比如map或者filter,都是以匿名函数为参数的。在这些情况下,有很多选择,但使用箭头函数是最方便和优雅的方式。因为,它在this的上下文中创建了箭头函数的一个版本,这通常是您想要的,并且是一种更清晰的语法。//bad[1,2,3].forEach(function(x){consty=x**2;returnx+y;});//good[1,2,3].forEach((x)=>{consty=x**2;返回x+y;});7.使用严格相等的相等比较有两种类型的相等运算符:松散的和严格的。松散的是==和!=是相对类型不可知的。例如,根据松散比较,2和'2'相等。然而,如果你使用strict===和!==那么它也会考虑类型,这通常是你想要的。//badconsole.log(2=='2')//true//goodconsole.log(2==='2')//false8,不要嵌套三元组三元运算符允许您创建内联条件语句。在if-else语句上使用它,您真的可以节省很多代码行。但是,正如它所定义的那样,它必须是内联的和简短的。因为嵌套的三元组会极大地损害代码的可读性。//badconstfoo=maybe1>maybe2?“栏”:值1>值2?"baz":null;//分成2个独立的三元表达式constmaybeNull=value1>value2?'baz':null;//goodconstfoo=maybe1>maybe2?'酒吧':也许是空的;9.使用空格为了便于阅读,请确保在注释的开头放置一个空格。//坏//是当前平板电脑isActive=true;//好//是当前平板电脑isActive=true;10.选择正确的shell风格正如我在介绍中提到的,大写风格是使代码看起来良好的最重要的概念之一,如果它是一致的话。在JavaScript中,有一些大写样式的约定。在命名对象、函数、变量和实例时使用驼峰式命名。仅在命名构造函数或类时使用PascalCase。在命名不可重新分配的变量和枚举时使用UPPERCASE_VARIABLES。根本不要使用snake_case或kebab-case。//badconstStudentCount=15;classparticle{...}functionget_name(){...}letapiKey='cX25zanxsPcdjsbxX985ddXM3';//goodconststudentCount=15;classParticle{...}functiongetName(){...}constAPI_KEY='cX25zanxsPcdjsbxX985ddXM3';编写计算机可以理解的代码一点也不难,但是,编写人类可以轻松理解的代码具有挑战性。这就是为什么在编写程序时有一些基本规则真正区分好代码和坏代码的原因。在这篇文章中,我尝试使用AirBNB的JavaScript风格指南来分享我编写好的JavaScript代码的基本规则。这些是我的首选,但如果你看一看这份全面的风格指南,我相信你会发现一些你不知道的东西。最后,感谢您的阅读。如果你喜欢它,请给我一个大拇指。