《编写可维护的JavaScript》——第 1 章 基本的格式化 1.1缩进层级

简介: 关于JavaScript编码风格,我们首先要讨论的是(几乎所有的语言都是如此)如何处理缩进。对这个话题是可以争论上好几个小时的,缩进甚至关系到软件工程师的价值观。在确定编程风格之初应当首先确定缩进格式,这非常重要,以免工程师后续会陷入那个老生常谈的打开文件时二话不说先重排代码缩进的问题之中。

本节书摘来自异步社区《编写可维护的JavaScript》一书中的第1章,第1.1节,作者:【美】Nicholas C. Zakas著,更多章节内容可以访问云栖社区“异步社区”公众号查看

第 1 章 基本的格式化

编程风格指南的核心是基本的格式化规则(formatting rule)。这些规则直接决定了如何编写高水准的代码。与在学校学习写字时所用的方格纸类似,基本的格式化规则将指引开发者以特定的风格编写代码。这些规则通常包含一些你不太在意的有关语法的信息,但对于编写清晰连贯的代码段来说,每一条信息都是非常重要的。
1.1 缩进层级
关于JavaScript编码风格,我们首先要讨论的是(几乎所有的语言都是如此)如何处理缩进。对这个话题是可以争论上好几个小时的,缩进甚至关系到软件工程师的价值观。在确定编程风格之初应当首先确定缩进格式,这非常重要,以免工程师后续会陷入那个老生常谈的打开文件时二话不说先重排代码缩进的问题之中。来看一下这段代码(为了演示,这里故意修改了示例代码的缩进)。

if (wl && wl.length) {
               for (i = 0, l = wl.length; i < l; ++i) {
          p = wl[i];
          type = Y.Lang.type(r[p]);
          if (s.hasOwnProperty(p)) { if (merge && type == 'object') {
      Y.mix(r[p], s[p]);
} else if (ov || !(p in r)) {
                        r[p] = s[p];
               }
        }
    }
}

快速读懂这段代码并不容易。这里的缩进并不统一,一眼看去else是对应到第1行的if语句。但实际上这个else和代码第5行的if语句相对应。罪魁祸首是多位开发人员在同一段代码里应用了不同的缩进风格。这恰恰说明了统一缩进风格的重要性。如果有适当的缩进,这段代码将变得更加易读。

if (wl && wl.length) {
     for (i = 0, l = wl.length; i < l; ++i) {
          p = wl[i];
          type = Y.Lang.type(r[p]);
          if (s.hasOwnProperty(p)) {
               if (merge && type == 'object') {
                    Y.mix(r[p], s[p]);
               } else if (ov || !(p in r)) {
                    r[p] = s[p];
               }
          }
     }
}

坚持使用适度的缩进是万里长征的第一步—本章在下面将提到这种做法可以带来其他可维护性方面的提升。

对于大多数编程风格来说,代码到底应该如何缩进并没有统一的共识。有两种主张。

使用制表符进行缩进

每一个缩进层级都用单独的制表符(tab character)表示。所以一个缩进层级是一个制表符,两个缩进层级为两个制表符,以此类推。这种方法有两个主要的好处。第一,制表符和缩进层级之间是一对一的关系,这是符合逻辑的。第二,文本编辑器可以配置制表符的展现长度1,因此那些想修改缩进尺寸的开发者可以通过配置文本编辑器来实现,想长即长,想短可短。使用制表符作缩进的主要缺点是,系统对制表符的解释不一致。你会发觉在某个系统中用一款编辑器打开文件时看到的缩进,和在另外一个系统中用相同的编辑器打开文件时看到的不一样。对于那些追求(代码展现)一致性的开发者来说,这会带来一些困惑。这些差异、争论会导致不同的开发者对同一段代码有不同的看法的,而这些正是团队开发需要规避的。

使用空格符进行缩进

每个缩进层级由多个空格字符组成。在这种观点中有三种具体的做法:2个空格表示一个缩进,2个空格表示一个缩进,以及8个空格表示一个缩进。这三种做法在其他很多编程语言中都能找到渊源。实际上,很多团队选择4个空格的缩进,对于那些习惯用2个空格缩进和用8个空格缩进的人来说,4个空格缩进是一种折中的选择。使用空格作缩进的好处是,在所有的系统和编辑器中,文件的展现格式不会有任何差异。可以在文本编辑器中配置敲击Tab键时插入几个空格。也就是说所有开发者都可以看到一模一样的代码呈现。使用空格缩进的缺点是,对于单个开发者来说,使用一个没有配置好的文本编辑器创建格式化的代码的方式非常原始。

尽管有人争辩说应当优先考虑使用一种缩进约定,但说到底这只是一个团队偏好的问题。这里我们给出一些各式各样的缩进风格作为参考。

  • jQuery核心风格指南(jQuery Core Style Guide)明确规定使用制表符缩进。
  • Dauglas Crockford的JavaScript代码规范(Douglas Crockford’s Code Conventions for the JavaScript Programming Language)规定使用4个空格字符的缩进。
  • SproutCore风格指南(SproutCore Style Guide)规定使用2个空格的缩进。
  • Goolge的JavaScript风格指南(Google JavaScript Style Guide)规定使用2个空格的缩进。
  • Dojo编程风格指南(Dojo Style Guide)规定使用制表符缩进。

我推荐使用4个空格字符为一个缩进层级。很多文本编辑器都默认将缩进设置为4个空格,你可以在编辑器中配置敲入Tab键时插入4个空格。使用2个空格的缩进时,代码的视觉展现并不是最优的,至少看起来是这样。

尽管是选择制表符还是选择空格做缩进只是一种个人偏好,但绝对不要将两者混用,这非常重要。这么做会导致文件的格式很糟糕,而且需要做不少清理工作,就像本节的第一段示例代码显示的那样。

相关文章
|
6月前
|
JavaScript
uni-app中关于格式化时间的js文件
uni-app中关于格式化时间的js文件
90 0
|
6月前
|
前端开发 JavaScript 算法
轻松实现数字格式化:JavaScript 中的千分位分隔技巧大揭秘
轻松实现数字格式化:JavaScript 中的千分位分隔技巧大揭秘
275 0
|
12月前
|
JavaScript 前端开发
js格式化日期
js格式化日期
|
6月前
|
JSON JavaScript 前端开发
设置WebStorm像VSCode一样每行代码结尾自动格式化加入“;”分号(JavaScript、TypeScript格式化)
设置WebStorm像VSCode一样每行代码结尾自动格式化加入“;”分号(JavaScript、TypeScript格式化)
|
19天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。
【10月更文挑战第7天】随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这两个工具,可以确保代码风格一致,提升团队协作效率和代码质量。
170 2
|
1天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
10 4
|
17天前
|
JavaScript 前端开发 开发者
如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。
【10月更文挑战第9天】随着前端开发技术的发展,代码规范和格式化工具变得至关重要。本文介绍如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。通过安装插件、配置 ESLint 和 Prettier,以及设置 VSCode,实现代码实时检查和格式化,确保代码风格一致。
12 2
|
18天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。
【10月更文挑战第8天】本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。通过安装 VSCode 插件、配置 ESLint 和 Prettier,实现代码规范检查和自动格式化,确保代码风格一致,提高可读性和维护性。
25 2
|
1月前
|
JSON JavaScript 前端开发
js如何格式化一个JSON对象?
js如何格式化一个JSON对象?
42 3
|
3月前
|
JavaScript
js金额数字格式化
本文介绍了两种实现数字格式化的方法:字符串操作与正则表达式。首先,通过递归地在每三位数字间插入逗号来格式化整数。接着,扩展该功能以支持自定义小数位数及分隔符,适用于更广泛的场景。最后,展示了如何利用正则表达式简化上述过程,实现相同的功能。