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

拯救一切强迫症 - 读《编写可维护的 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]
			}
		}
	}
}

（未完待续）