作者：李松峰 奇舞周刊
转发链接：https://mp.weixin.qq.com/s/XjlddiMNQbExB0vtTLWThA
在早期网站中，JavaScript主要用于实现一些小型动效或表单验证。今天的Web应用则动辄成千上万行JavaScript代码，用于完成各种各样复杂的处理。这些变化要求开发者把可维护能力放到重要位置上。正如跟传统意义上的软件工程师一样，JavaScript工程师受雇是要为公司创造价值的。现代前端工程师的使命，不仅仅是要保证产品如期上线，更重要的是要随着时间推移为公司不断积累知识资产。
编写可维护的代码十分重要，因为很多开发者都会花大量时间去维护别人写的代码。实际开发中，从第一行代码开始写起的情况是非常少见的。通常都是要在别人的代码之上来构建自己的工作。让自己的代码容易维护，可以保证其他开发者更好地完成自己的工作。
注意 可维护代码的概念并不只适用于JavaScript，其中很多概念适用于任何编程语言。当然，有部分概念可能确实是特定于JavaScript的。
1. 什么是可维护的代码
可维护的代码有几个特点。通常，说代码可维护就意味着它具备如下特点。
- 容易理解：无需求助原始开发者，任何人一看代码就知道是干什么的，怎么实现的。
- 符合常识：代码中的一切都显得自然而然，无论操作有多么复杂。
- 容易适配：即使数据发生变化也不用完全重写。
- 容易扩展：代码架构经过认真设计，支持未来扩展核心功能。
- 容易调试：出问题时，代码可以给出明确的信息，通过它能直接定位问题。
能够写出可维护的JavaScript代码是一项重要的专业技能。这个技能是一个周末就拼凑一个网站的业余爱好者和对自己所做的一切都深思熟虑的专业开发者的重要区别。
2. 编码规范
编写可维护代码的第一步是认真考虑编码规范。编码规范在多数编程语言中都会涉及，简单上网一搜，就可以找到成千上万的相关文章。专业组织都会有为开发者建立的编码规范，旨在让人写出更容易维护的代码。优秀开源项目都有严格的编码规范，能够让社区的所有人容易理解代码的组织。
编码规范对JavaScript而言非常重要，因为这门语言实在太灵活了。与多数面向对象语言不同，JavaScript并不强迫开发者把任何东西都定义为对象。相反，JavaScript支持任何编程风格，包括传统的面向对象编程和声明式编程，以及函数式编程。简单看几个开源的JavaScript库，就会发现有很多方式可以创建对象、定义方法和管理环境。
接下来的几节会讨论制定编码规范的一些基础方面。这些主题都很重要，当然每个人的需求不同，实现方式也可以不同。
2.1 可读性
要想让代码容易维护，首先必须让人容易看懂。可读性必须考虑代码是一种文本文件。为此，代码缩进是保证可读性的重要基础。如果所有人都使用相同的缩进，整个项目的代码就会更容易看懂。缩进通常要使用空格数而不是Tab（制表符）来定义，因为后者在不同文本编辑器中的显示会有差异。一般来说，缩进都是以4个空格为单位，当然具体多少个可以自己定。
可读性的另一方面是代码注释。在多数编程语言中，广泛接受的做法是为每个方法都编写注释。由于JavaScript可以在代码中任何地方创建函数，所以这一点容易被忽视。正因为如此，可能给JavaScript中的每个函数都写注释才更重要。一般来说，以下这些地方都是应该写注释的。
- 函数和方法。每个函数和方法都应该有注释来描述其用途，以及完成任务所用的算法。同时，也写清使用这个函数或方法的前提（假设）、每个参数的含义，以及函数是否返回值（因为通过函数定义看不出来）。
- 大型代码块。多行代码但用于完成单一任务的，应该在前面给出注释，把要完成的任务写清楚。
- 复杂的算法。如果使用了不同寻常的手法解决了问题，要通过注释解释明白。这样不仅可以帮到别人，也可以让自己今后再看的时候更快想起来。
- 使用黑科技。由于浏览器之间的差异，JavaScript代码中通常都会包含一些黑科技。不要假设其他人一看就能明白某个黑科技是为了解决某个浏览器的什么问题。如果对某个浏览器不能使用正常方式达到目的，那要在注释里把黑科技的用途写出来。这样可以避免别人误以为黑科技没有用而把它“修复”掉，结果你已经修好的问题又会复现。
缩进和注释可以让代码更容易理解，将来也更容易维护。
2.2 变量和函数命名
变量和函数的适当命名对于可读性和可维护性也是至关重要的。由于很多JavaScript开发者都是“草莽”出身，所以很容易用foo、bar命名变量，用doSomething来命名函数。专业JavaScript开发者必须改掉这些积习，这样才能写出可维护的代码。以下是关于命名的通用规则。
- 变量名应该是名词，例如car或person。
- 函数名应该以动词开始，例如getName()。返回布尔值的函数通常以is开头，比如isEnabled()。
- 对变量和函数都使用符合逻辑的名字，不用担心长度。长名字的问题可以通过后处理和压缩解决。
- 变量、函数和方法应该以小写字母开头，使用驼峰大小写形式，如getName()和isPerson。类名应该首字母大写，比如Person、RequestFactory。常量值应该全部大写并以下划线相接，比如REQUEST_TIMEOUT。
- 名字要尽量用描述性和直观的词汇，但不要过于冗长。getName()一看就知道会返回名字，而PersonFactory一看就知道会产生某个Person对象或实例。
要完全避免没有用的变量名，比如不能表示所包含数据的类型。通过适当命名，代码读起来就会像故事，因此更容易理解。
2.3 变量类型透明化
因为JavaScript是松散类型的语言，所以很容易忘记变量包含的数据类型。适当命名可以在某种程度上解决这个问题，但还不够。有三种方式可以表明变量的数据类型。
第一种方式是通过初始化。定义变量时，应该立即将其初始化为一个将来要使用类型的值。例如，要保存布尔值的变量可以将其初始化为true或false，而要保存数值的变量可以将其初始化为一个数值。再看几个例子：
// 通过初始化表明变量类型
let found = false; // Boolean
let count = -1; // number
let name = “”; // string
let person = null; // object
初始化为特定数据类型的值可以明确表示变量的类型。在ES6之前，初始化方式不适合函数声明中函数的参数。ES6之后，可以在函数声明中为参数指定默认值来表明参数类型。
第二种表示变量类型的方式是使用匈牙利表示法。匈牙利表示法指的是在变量名前面前缀一个或多个字符表示数据类型。这种表示法曾经在脚本语言中非常流行，很长时间以来也是JavaScript首选的格式。对于基本数据类型，用o表示对象（object）、s表示字符串（string），i表示整数（integer），f表示浮点数（float）、b表示布尔值（boolean）。下面看几个例子。
// 使用匈牙利表示法标明数据类型
let bFound; // Boolean
let iCount; // integer
let sName; // string
let oPerson; // object
匈牙利表示法也可以应用给函数参数。匈牙利表示法的缺点是让代码可读性有所下降，不够直观，破坏了类似句子的自然阅读流畅性。为此，匈牙利表示法已经被很多开发者抛弃。
最后一种表明数据类型的方式是使用类型注释。类型注释放在变量名后面，初始化表达式的前面。基本思路是在变量旁边使用注释说明类型，比如：
// 使用类型注释标明数据类型
let found /*:Boolean*/ = false;
let count /*:int*/ = 10;
let name /*:String*/ = “Nicholas”;
let person /*:Object*/ = null;
类型注释在保持整体可读性的同时向代码中注入了类型信息。类型注释的缺点是不能再使用多行注释把大型代码块注释掉了。因为类型注释也是多行注释，因此会造成干扰，如下面的例子所示：
// 这样多行注释不会生效
/*
let found /*:Boolean*/ = false;
let count /*:int*/ = 10;
let name /*:String*/ = “Nicholas”;
let person /*:Object*/ = null;
*/
这里本来是想使用多行注释把所有变量声明都注释掉。但类型注释产生了干扰，因为第一个/*（第2行）会与第一个*/（第3行）匹配，结果会导致语法错误。如果想注释掉包含类型注释的代码，只能使用单行注释一行一行地注释掉每一行（有的编辑器可以自动完成）。
以上是三种标明变量数据类型的最常用方式。每种方式都有优点和缺点，可以根据自己的情况选用。关键要看哪一种最适合自己的项目，并保证一致性。
3. 松散耦合
只要应用的某个部分对另一个部分依赖得过于紧密，代码就会变成强耦合，因而难以维护。典型的问题是在一个对象中直接引用另一个对象。这样，修改其中一个，可能必须还得修改另一个。紧密耦合的软件难于维护，肯定需要频繁地重写。
考虑到相关的技术，Web应用在某些情况下可能变得过于强耦合。关键在于有这个意识，随时注意不要让代码产生强耦合。
3.1 解耦HTML/JavaScript
Web开发中最常见的耦合是HTML/JavaScript耦合。在网页中，HTML和JavaScript分别代表不同层面的解决方案。HTML是数据，JavaScript是行为。因为它们之间要交互操作，需要通过不同的方式将这两种技术联系起来。可惜的是，其中一些方式会导致HTML与JavaScript相耦合。
把JavaScript直接嵌入在HTML中，包括使用
