正儿八经地写JavaScript之代码格式

从入行到现在,琢磨着已经写了很多行代码了,也形成了自己的编码习(e)惯(xi)。不过每次回去看前几个月的代码,总是想吐槽,不论是从代码风格还是代码实现上。最近刚好碰见《编写可维护的JavaScript》打折,于是花了几天时间看了一遍,这里算是读书笔记,以及关于个人代码风格的一点思考吧。

<!--more-->

参考:

1. 风格

1.1. 代码缩进

用空格缩进还是tab缩进?由于不同操作系统对于制表符的展示不同,因此可能会出现源码不一致的情形,因此推荐使用空格缩进,但是每次缩进都敲空格键肯定很蛋疼,索性现在的编辑器基本可以配置敲击tab键时输入几个空格,也就是说我们可以使用tab键来实现空格缩进。

缩进的另外一个问题是缩进的长度。看过不少源码,有2个空格、4个空格和8个空格等风格,这里没有啥优劣之分了,全看个人爱好,我是比较喜欢4个空格的。同理这也是可以设置的。

1.2. 分号

JavaScript可以在句末插入分号,也可以省略分号。除了极少数的情况(比如return换行啥的)一般不会影响程序。在其他语言中,可能强制规定句末分号结尾,由于工作中也会写点PHPJava,因此我的习惯是句末以分号结尾

1.3. 换行

很多语言的编程规范都提到一行代码最长不应当超过80个字符。一行代码过长,看起来就不是那么直观了,拖动编辑器的横向滚动条也比较麻烦。在开发过程中我喜欢通过ctrl + 滚轮键来缩放字体预览被编辑器强制断行的代码。

对于长链式调用的代码,可以进行换行和缩进。 有时一段代码的语义和另一段代码不相关,这时也可以使用空行将它们分隔,代码看起来就有分组的感觉了。从编码的方面来讲,将一段代码包在函数里面应该更清晰一点。

1.4. 命名

计算机科学只存在两个难题:缓存失效和命名。

常见的命名风格有驼峰和下划线两种,书上的建议是根据语言的库函数来统一命名风格,JavaScript库函数采用的是驼峰命名,而PHP库函数采用的是下划线命名。这就是说在JS中,变量名应当总是遵守驼峰大小写命名法,并且命名前缀应当是名词。以名词作为前缀可以让变量和函数区分开来,因为函数名前缀应当是动词。

关于变量命名的另外一个问题就是如何为变量取一个正确的名字(在CSS中我曾经纠结和很长一段时间,尽管现在也没有完全解决这个问题)。好的变量名对于程序的维护也是很有必要的。参考的15条变量&方法命名的最佳实践可以尝试一下,仔细想想,我现在的变量命名还停留在基础的单词拼接层面,实在是汗颜。

1.5. 注释

注释是代码的组成部分,可以算作另一种形式的文档,对于代码的可维护性而言,注释是必不可少的。

常见的注释有:

  • 单行注释,//
    • 独占一行的注释,用来解释下一行代码
    • 在代码行尾部的注释
    • 被注释的大段代码
  • 多行注释,/**/

在平常的工作中,频繁使用的是单行注释,多行注释一般用于文件开头的文件描述(通常是IDE自动生成的),以及函数的参数说明中。注释风格应保持统一。

错误的注释比没有注释更加可怕。也许你会想“注释怎么可能会写错呢?”这个问题,错误的注释通常是由于代码跟注释没有同步引起的,比如参数数量和含义发生了改变,却忘了同步更新注释,就会发生这个问题。

何时添加注释也是一个比较纠结的问题,书中给出的指导原则是:当代码不够清晰时添加注释,当代码很明了时不应当

1.6. 花括号对齐

之前在工作组里面,就花括号对齐这个问题还引起了一点争议~。对齐有两种风格:

  • 将左花括号放置在块语句的第一句代码的末尾,我就比较喜欢这种,看起来代码更加紧凑
  • 将左花括号放置在块语句第二行,在之前写C代码的时候我就采用了这种形式,Visio Studio(宇宙最强IDE)中C#强制采用这种形式(这是书上讲的)

2. 代码

2.1. 变量声明提前

由于存在变量声明提前的问题,在函数内部任意地方通过var定义变量与在函数顶部定义变量是完全一致的。因此一种流行的风格是将所有的变量声明放在函数顶部而不是散落在各个角落

在C++中,由于存在块级作用域我更喜欢是就近声明的原则,即变量在首次使用处进行声明。在ES6中,引入了letconst的关键字,因此,我更倾向于使用就近声明。

2.2. 函数声明

由于函数声明也会被提前,因此可以函数声明可以在调用函数之后,但是推荐总是先声明函数后使用函数

2.3. 严格模式

在函数内使用use strict,而不是使用全局的严格模式,避免某些插件无法使用

3. 格式化工具

3.1. 格式检测

使用eslint对代码格式进行检测,可以培养良好的编码习惯。

具体的规则参考官方文档,可以定制具体的规则。

有一个非常赞的功能,即检测换行字符,公司的代码库都同一使用UNIX换行,即以\n结尾,但是由于开发环境是Windows,因此即便每次都设置了编辑器的换行格式,传代码时却经常提示LF will replaced by CRLF这样的警告,真的蛋疼。

3.2. 快速格式化

sublime可以安装很多插件,其中就有快速整理代码格式的插件

  • HTML-CSS-JS Prettify,格式化HTML/CSS/JS代码,需要安装node环境,默认快捷键是ctrl+shift+H
  • Pretty JSON,格式化JSON文件,默认快捷键ctrl+shift+j

WebStrom的功能更加强大,可以先设置对应文件的代码格式,然后一键格式化

  • 首先打开File > Settings,搜索Code Style,然后选择指定后缀的文件,可以看见右侧展开的操作选项卡
  • 通过切换选项卡设置代码风格,包括缩进、断行、注释、等号对齐(这个功能太酷炫了)等功能,然后确定
  • 通过Code菜单栏执行Reformat Code操作,也可以设置对应的快捷键

4. 小结

代码写久了就会形成自己的风格,而一个人的习惯风格是很难改正的,如果在初期养成好习惯,会少走很多弯路。

一份好的代码,必然是风格统一、逻辑清晰的,这也是我正在努力学习的方向。

这篇文章放在草稿箱貌似很久了~虽然没写到啥东西,还是决定发布出来,自勉。