拯救一切强迫症 - 读《编写可维护的 JavaScript》（一）

本文写于 2020 年 4 月 24 日

我在小学的时候就有接触过编程，所以读大一的时候 C 语言还算是轻车熟路。自然会有很多同学给我看他们的代码，麻烦我帮助他们找一找 bug。

我代码拿到手的第一件事儿是啥？

重排代码格式！（相信大家基本上大学学 C 语言都用的是 VC++，并没有代码自动格式化功能，现在我极力推荐 prettier 进行自动格式化）

通常我看到的代码都是这样的：

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 || !pinr) {
				        r[p] = s[p]
	}
		      }
	        }
    }

这种代码人类几乎没有办法读懂！

老话说得好：代码是给人读的，只是偶尔给机器看一下。

让我们来重置一下缩进：

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 || !(pinr)){
        r[p] = s[p];
      }
    }
  }
}

代码瞬间变得易于阅读了！

01 缩进

接下来我们来看一看书中对于缩进的观点。

使用制表符缩进

每一个缩进层级都代表一个单独的制表符。也就是一个制表符一个缩进，两个制表符两个缩进，以此类推。

他的好处在于，编辑器可以直接修改制表符的长度，可长可短，随心所欲。

但是缺点在于系统对于制表符的解释不一样。我们在 windows、macOS、Linux 中看到的制表符可能都不一样。

使用空格缩进

有几种做法：2 个空格表示一个缩进、4 个空格表示一个缩进、8 个空格表示一个缩进。

很多团队经常会选择 4 个空格，因为这是一种折中的方案。

在文本编辑器中，我们可以配置在敲击 tab 时，自动插入 n 个空格，这样，不管在哪里打开，代码都会是一样的。

我们看一些著名团队的选择——

制表符：

jQuery
Dojo

空格：

Dauglas Crockford 使用 4 个空格字符的缩进；
Sprout Core 使用 2 个空格的缩进；
Goolge 的 JavaScript 使用 2 个空格的缩进。

作者个人推荐使用四个空格作为一个缩进层级。

无论如何，选择了其中一种，就一直用下去，千万不要在一个文件里混用！

02 语句结尾

作者认为应该加分号，但是我个人不喜欢加分号。

JS 又一个叫做 Automatic Semicolon Insertion 机制，叫做自动分号插入机制。但是 ASI 的规则非常非常的复杂，所以我们很难预料他会在哪里插入分号，包括 jQuery、Google、Dojo 都是推荐使用分号结尾。

03 一行的长度

很多很多的编程规范提到过，一行长度不宜超过 80。

这个规则是因为当年的文本编辑器，单行字数限制就是 80。

但是现在，即使我们的屏幕宽了、分辨率高了，还是推荐大家使用 80 的长度限制。

看看大公司的规范：

Java 语言编程规范，80；
Android 开发者编码风格指南，80；
非官方的 Ruby 编程规范：80；
python，79。

在超过了 80 的长度之后就需要换行了，比如这样：

callAFunction(document, element, window, "somestringvalue", true, 123,
              navigator);

在换行后应该追加一个缩进

要注意，不要让运算符或者逗号换行了：

callAFunction(document, element, window, "somestringvalue", true, 123
              , navigator);

04 空行

为了保证代码的可读性，我们会适当的空上几行。

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 || !(pinr)) {
        r[p]=s[p];
      }
    }
  }
}

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 || !pinr) {
				r[p] = s[p]
			}
		}
	}
}

（未完待续）