开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第1天,点击查看活动详情
—————————————————————————————————
编程风格指南的核心是基本的格式化规则。这些规则直接决定了如何编写高水准的代码。基本的格式化规则将指引开发者以特定的风格编写代码。这些规则通常包含一些你不太在意的有关语法的信息,但对于编写清晰连贯的代码段来说,每一条信息都是非常重要的。
我整理了7个基本的格式规则,希望能对你有所帮助。
1、缩进层级****
关于JavaScript编码风格,我们首先讨论【如何处理缩进】这个问题。原因很简单,这样做是为了以免工程师后续会陷入那个老生常谈的打开文件时二话不说先重排代码缩进的问题之中。
来看一下这段代码(为了演示,这里故意修改了示例代码的缩进)。
这里的缩进并不统一,一眼看去else是对应到第1行的if语句。但实际上这个else和代码第5行的if语句相对应。罪魁祸首是多位开发人员在同一段代码里应用了不同的缩进风格。
如果有适当的缩进,这段代码将变得更加易读。
对于大多数编程风格来说,代码如何缩进一般有两种主张:
1)使用制表符进行缩进
优点——
第一,制表符和缩进层级之间是一对一的关系,符合逻辑。
第二,文本编辑器可以配置制表符的展现长度。
缺点——
系统对制表符的解释不一致。不同系统中打开同一款编辑器显示的缩进不一样。
2)使用空格符进行缩进
优点——
在所有的系统和编辑器中,文件的展现格式不会有任何差异。
缺点——
对于单个开发者来说,使用一个没有配置好的文本编辑器创建格式化的代码的方式非常原始。
2、语句结尾****
JavaScript的语句要么独占一行,要么以分号结尾。下面这两段示例代码都是合法的JavaScript。
有赖于分析器的自动分号插入(Automatic Semicolon Insertion,ASI)机制,JavaScript代码省略分号也是可以正常工作的。但ASI的分号插入规则非常复杂且很难记住,因此建议不要省略分号。
看一下这段代码:
在这段代码中,函数getData()的本意是返回一个包含一些数据的对象。然而,return之后新起了一行,导致return后被插入了一个分号,这会导致函数返回值是undefined。可以通过将左花括号移至与return同一行的位置来修复这个问题。
如果省略了分号,JSLint和JSHint默认都会有警告。
3、行的长度****
如果一行代码太长,编辑窗口出现了横向滚动条,会让开发人员感觉很别扭。关于行长度,有一些常见的建议:
1)Java语言编程规范中规定源码里单行长度不超过80个字符,文档中代码单行长度不超过70个字符。
2)Android开发者编码风格指南规定单行代码长度不超过100个字符。
3)非官方的Ruby编程规范中规定单行代码长度不超过80个字符。
4)Python编程规范中规定单行代码长度不超过79个字符。
Java Script风格指南中很少提及行的长度,但Crockford的代码规范中指定一行的长度为80个字符。我也倾向于将行长度限定在80个字符。
4、换行****
当一行长度达到了单行最大字符数限制时,就需要手动将一行拆成两行。通常我们会在运算符后换行,下一行会增加两个层级的缩进。比如(假定缩进为4个字符)下面这样:
在这个例子中,逗号是一个运算符,应当作为前一行的行尾。
这个规则有一个例外:当给变量赋值时,第二行的位置应当和赋值运算符的位置保持对齐。比如:
这段代码里,变量anotherSomethingElse和首行的something保持左对齐,确保代码的可读性,并能一眼看清楚折行文本的上下文。
5、空行****
在编程规范中,空行是常常被忽略的一个方面。
有时一段代码的语义和另一段代码不相关,这时就应该使用空行将它们分隔,确保语义有关联的代码展现在一起。比如:
给这段代码添加了几个空行之后,得到:
这段示例代码中所展示的编程规范是在每个流控制语句之前(比如if和for语句)添加空行。这样做能使你更流畅地阅读这些语句。
6、命名****
只要是写代码,都会涉及变量和函数,因此变量和函数命名对于增强代码可读性至关重要。JavaScript语言的核心ECMAScript,即是遵照了驼峰式大小写(Camel case)命名法。驼峰式大小写命名法是由小写字母开始的,后续每个单词首字母都大写,比
如:
大部分JavaScript程序员使用驼峰命名法来给变量和函数命名。
7、直接量****
JavaScript中包含一些类型的原始值:字符串、数字、布尔值、null和undefined。同样也包含对象直接量和数组直接量。这其中,只有布尔值是自解释(self-explanatory)的,其他的类型或多或少都需要思考一下它们如何才能更精确地表示出来。
7.1字符串****
在JavaScript中,字符串是独一无二的。字符串可以用双引号括起来,也可以用单引号括起来。比如:
在这段示例代码中,在使用双引号括起来的字符串里需要对双引号进行转义,而在使用单引号括起来的字符串里则不必如此。
7.2数字****
在JavaScript中的数字类型只有一种,因为所有数字形式——整数和浮点数——都存储为相同的数据类型。还有一些其他的数字直接量格式来表示不同的数据格式。其中大部分写法都很好用,但也有一些写法有问题。
前两种有问题的写法分别是省略了小数部分,比如10.,和省略了整数部分,比如.1。每种写法都有同一个问题:很难搞清楚被省略小数点之前或之后的部分是不小心丢掉了还是刻意为之,很可能是开发者不小心漏掉了。因此为了避免歧义,请不要省略小数点之前或之后的数字。
7.3null****
null是一个特殊值,但我们常常误解它,将它和undefined搞混。在下列场景中应当使用null:
用来初始化一个变量,这个变量可能赋值为一个对象。
用来和一个已经初始化的变量比较,这个变量可以是也可以不是一个对象。
当函数的参数期望是对象时,用作参数传入。
当函数的返回值期望是对象时,用作返回值传出。
还有下面一些场景不应当使用null。
不要使用null来检测是否传入了某个参数。
不要用null来检测一个未初始化的变量。
7.4undefined****
undefined是一个特殊值,我们常常将它和null搞混。那些没有被初始化的变量都有一个初始值,即undefined,表示这个变量等待被赋值。比如:
尽管这段代码能正常工作,但我们建议避免在代码中使用undefined。这个值常常和返回“undefined”的typeof运算符混淆。
7.5 对象直接量****
创建对象最流行的一种做法是使用对象直接量,在直接量中直接写出所有属性,这种方式可以取代先显式地创建Object的实例然后添加属性的这种做法。比如,我们很少见到下面这种写法:
对象直接量允许你将所有的属性都括在一对花括号内。
当定义对象直接量时,常常在第一行包含左花括号,每一个属性的名值对都独占一行,并保持一个缩进,最后右花括号也独占一行。比如:
这种写法在开源JavaScript代码中能经常看到。
7.6 数组直接量****
和对象直接量类似,数组直接量是JavaScript中定义数组最简洁的一种方式。
不赞成显式地使用Array构造函数来创建数组,比如:
可以使用两个方括号将数组初始元素括起来,来替代使用Array构造函数的方式来创建数组,比如:
在JavaScript中,这种模式非常常见。
以上就是总结的7个JavaScript的基本的格式化规则。希望对你有所帮助。****