前语

自2000年以来，Web 开发一直在以惊人的速度开展。从最初毫无章法可循的 “野蛮生长”，到现在已开展出完好的标准体系，各种研讨成果和最佳实 践层出不穷。Web 开发领域的最新技能和开发东西现已令人眼花缭乱。其间，前端三件套中的核心 JavaScript 尤其成为了研讨和重视的焦点。 JavaScript 的最佳实践能够分成几类，适用于开发流程的不同阶段。

提示：阅览本文大约需求50分钟

1. 可保护性

在前期网站中，JavaScript 首要用于完结一些小型动效或表单验证。今日的 Web 运用程序则动辄成千上万行 JavaScript 代码，用于完结各式各样的杂乱处理。这些改变要求开发者把可保护能力放到重要位置上。正如更传统意义上的软件工程师相同，JavaScript 开发者受雇是要为公司创造价值的。他们不只需保证产品如期上线，而且要跟着时刻推移为公司不断积累 知识资产。

编写可保护的代码十分重要，由于大多数开发者会花许多时刻去保护他人写的代码。实际开发中，从第一行代码开端写起的状况十分少，一般是要在他人的代码之上构建自己的作业。让自己的代码简略保护，能够保证其他开发者更好地完结自己的作业。

留意：可保护代码的概念并不只适用于 JavaScript，其间许多概念适用于一切编程言语，尽管部分概念特定于 JavaScript。

1.1 什么是可保护的代码

一般，说代码“可保护”就意味着它具有如下特色。

  • 简略了解 ：无须求助原始开发者，任何人一看代码就知道它是干什么的，以及它是怎么完结的。
  • 符合常识 ：代码中的一切都显得顺理成章，不管操作有多么杂乱。
  • 简略适配 ：即便数据发生改变也不必彻底重写。
  • 简略扩展 ：代码架构经过认真规划，支撑未来扩展核心功用。
  • 简略调试 ：出问题时，代码能够给出明确的信息，经过它能直接定位 问题。

能够写出可保护的 JavaScript 代码是一项重要的专业技能。这便是业余爱好者和专业开发人员之间的差异，前者用一个周末就拼凑出一个网站，而后者真实了解自己的技能。

1.2 编码标准

编写可保护代码的第一步是认真考虑编码标准。大多数编程言语会触及编码标准，简略上网一搜，就能够找到成千上万的相关文章。专业安排有为开发者树立的编码标准，旨在让人写出更简略保护的代码。优异开源项目有严厉的编码标准，能够让社区的一切人简略地了解代码是怎么安排的。

编码标准对 JavaScript 而言十分重要，由于这门言语实在太灵活了。与大多数面向方针言语不同， JavaScript 并不强迫开发者把任何东西都界说为方针。它支撑任何编程风格，包含传统的面向方针编程、声明式编程，以及函数式编程。简略看几个开源的 JavaScript库，就会发现有许多办法能够创立方针、界说办法和管理环境。

接下来的几节会谈论制定编码标准的一些基础知识。这些话题很重要，当然每个人的需求不同，完结办法也能够不同。

1.2.1 可读性

要想让代码简略保护，首要有必要使其可读。可读性有必要考虑代码是一种文本文件。为此，代码缩进是保证可读性的重要基础。假如一切人都运用相同的缩进，整个项意图代码就会更简略让人看懂。缩进一般要运用空格数而不是Tab（制表符）来界说，由于后者在不同文本编辑器中的显现不同。一般来说，缩进是4个空格，当然详细多少个能够自己定。

可读性的另一方面是代码注释。在大多数编程言语中，广泛承受的做法是为每个办法都编写注释。由于 JavaScript 能够在代码中的任何地 方创立函数，所以这一点常常被忽视。正由于如此，或许给 JavaScript 中的每个函数都写注释才更重要。一般来说，以下这些当地应该写注释。

  • 函数和办法 。每个函数和办法都应该有注释来描绘其用处，以及完结使命所用的算法。一同，也写清运用这个函数或办法的前提 （假定）、每个参数的意义，以及函数是否回来值（由于经过函 数界说看不出来）。

  • 大型代码块 。多行代码但用于完结单一使命的，应该在前面给出注释，把要完结的使命写清楚。

  • 杂乱的算法 。假如运用了独特的办法处理问题，要经过注释解说了解。这样不只能够协助他人查看代码，也能够协助自己往后查 看代码。

  • 运用黑科技 。由于浏览器之间的差异，JavaScript 代码中一般包含一些黑科技。不要假定其他人一看就能了解某个黑科技是为了处理某个浏览器的什么问题。假如某个浏览器不能运用正常办法到达意图，那要在注释里把黑科技的用处写出来。这样能够防止他人误以为黑科技没有用而把它“修复”掉，成果你已处理的问 题又会呈现。

缩进和注释能够让代码更简略了解，将来也更简略保护。

1.2.2 变量和函数命名

代码中变量和函数的恰当命名关于其可读性和可保护性至关重要。由于许多 JavaScript 开发者是业余爱好者出身，所以很简略用foo 、 bar 命名变量，用 doSomething 来命名函数。专业 JavaScript 开发者有必要改掉这些习气，这样才干写出可保护的代码。以下是关于命名的通用规矩。

  • 变量名应该是名词，例如 car 或 person 。

  • 函数名应该以动词开端，例如 getName() 。回来布尔值的函数 一般以 is 最初，比方 isEnabled() 。

  • 对变量和函数都运用符合逻辑的称号，不必忧虑长度。长姓名的问题能够经过后处理和紧缩处理（后面会谈论）。

  • 变量、函数和办法应该以小写字母最初，运用驼峰巨细写 （camelCase）办法，如 getName() 和 isPerson 。类名应该首 字母大写，如Person 、RequestFactory 。常量值应该全部 大写并以下划线相接，比方 REQUEST_TIMEOUT 。

  • 称号要尽量用描绘性和直观的词汇，但不要过于冗长。 getName() 一看就知道会回来称号，而 PersonFactory 一看就知道会发生某个 Person 方针或实体。

1.2.3 变量类型透明化

由于 JavaScript 是松懈类型的言语，所以很简略忘掉变量包含的数据类型。恰当命名能够在某种程度上处理这个问题，但还不够。有三种办法能够标明变量的数据类型。

第一种标明变量类型的办法是经过初始化。界说变量时，应该当即将其初始化为一个将来要运用的类型值。例如，要保存布尔值的变量，能够将其初始化为 true 或 false ；而要保存数值的变量，能够将其初始化为一个数值。再看几个比方：

// 经过初始化标明变量类型
let found = false; // 布尔值
let count = -1;    // 数值
let name = "";     // 字符串
let person = null; // 方针

初始化为特定数据类型的值能够明确表明变量的类型。ES6之前，初始化办法不合适函数声明中函数的参数；ES6之后，能够在函数声明中为参数指定默许值来标明参数类型。

第二种标明变量类型的办法是运用匈牙利表明法。匈牙利表明法指的是在变量名前面前缀一个或多个字符表明数据类型。这种表明法曾在脚本言语中十分盛行，很长时刻以来也是 JavaScript 首选的格局。关于根本数据类型，JavaScript传统的匈牙利表明法用 o 表明方针，s 表明字符串，i 表明整数，f 表明浮点数，b 表明布尔值。示例如下：

// 运用匈牙利表明法标明数据类型
let bFound;  // 布尔值
let iCount;  // 整数
let sName;   // 字符串
let oPerson; // 方针

匈牙利表明法也能够很好地运用于函数参数。它的缺陷是使代码可读性下降、不够直观，并破坏了相似句子的天然阅览流畅性。因而，匈牙利表明法在开发者中失宠了。

最终一种标明变量类型的办法是运用类型注释。类型注释放在变量名后面、初始化表达式的前面。根本思路是在变量周围运用注释阐明类型，比方：

// 运用类型注释表明数据类型
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行） 的实例匹配，所以会导致语法过错。假如想注释掉运用类型注释的代码，则只能运用单行注释一行一行地注释掉每一行（许多编辑器能够主动完结）。

以上是最常用的三种标明变量数据类型办法。每种办法都有其优点和缺陷，能够依据实际状况选用。要害要看哪一种最合适自己的项目， 并保证共同性。

1.3 松懈耦合

只需运用程序的某个部分对另一个部分依靠得过于严密，代码就会变成严密耦合，因而难以保护。典型的问题是在一个方针中直接引证另一个方针，这样，修正其间一个，或许有必要还得修正另一个。严密耦合的软件难于保护，肯定需求频频地重写。

考虑到相关的技能，Web 运用程序在某些状况下或许变得过于严密耦合。要害在于有这个意识，随时留意不要让代码发生严密耦合。

1.3.1 解耦HTML/JavaScript

Web 开发中最常见的耦合是 HTML/JavaScript 耦合。在网页中，HTML和 JavaScript 别离代表不同层面的处理方案。HTML 是数据，JavaScript 是行为。这是由于它们之间要交互操作，需求经过不同的办法将这两种技能联系起来。惋惜的是，其间一些办法会导致 HTML 与 JavaScript 严密耦合。

把 JavaScript 直接嵌入在 HTML 中，要么运用包含嵌入代码的 <script> 元素，要么运用 HTML 特点增加作业处理程序，这些都会形成严密耦合。比方下面的比方：

<!-- 运用<script>形成HTML/JavaScript严密耦合 -->
<script>
  document.write('Hello world!')
</script>
<!-- 运用作业处理程序特点形成HTML/JavaScript严密耦合 -->
<input type="button" value="Click Me" onclick="handleClick()" />

尽管技能上这样做没有问题，但实践中，这样会将表明数据的 HTML 与界说行为的 JavaScript 严密耦合在一同。理想状况下，HTML 和 JavaScript 应该彻底分隔，经过外部文件引进 JavaScript，然后运用 DOM 增加行为。

HTML 与 JavaScript 严密耦合的状况下，每次剖析 JavaScript 的报错都要先确认过错来自 HTML 仍是 JavaScript。这样也会引发代码可用性的新过错。在这个比方中，用户或许会在 handleClick() 函数可用之 前点击按钮，然后导致 JavaScript 报错。由于每次修正按钮的行为都需求既改 HTML 又改 JavaScript，而实际上只需后者才是有必要修正的，所以就会降低代码的可保护性。

在相反的状况下，HTML 和 JavaScript 也会变得严密耦合：把 HTML 包含在 JavaScript 中。这种状况一般发生在把一段 HTML 经过 innerHTML 刺进到页面中时，示例如下：

// HTML严密耦合到了JavaScript
function insertMessage(msg) {
  let container = document.getElementById('container')
  container.innerHTML = `
    <div class="msg">
      <p> class="post">${msg}</p>
      <p><em>Latest message above.</em></p>
    </div>
  `
}

一般来说，应该防止在 JavaScript 中创立许多 HTML。相同，这首要是为了做到数据层和行为层各司其职，在犯错时更简略定位问题地点。运用上面的示例代码时，假如动态刺进的 HTML 格局不对，就会形成页面布局犯错。不过在这种状况下定位过错就更困难了，由于这时分一般首要会去找页面中犯错的 HTML 源代码，但又找不到，由于它是动态生成的。修正数据或页面的一同还需求修正J avaScript，这阐明两层是严密耦合的。

HTML 烘托应该尽或许与 JavaScript 分隔。在运用 JavaScript 刺进数据时，应该尽或许不要刺进符号。相应的符号能够包含并隐藏在页面中，在需求的时分 JavaScript 能够直接用它来显现，而不需求动态生成。另一个办法是经过 Ajax 恳求获取要显现的 HTML，这样也能够保证同一个烘托层（PHP、JSP、Ruby等）担任输出符号，而不是把符号嵌 在 JavaScript 中。

解耦HTML和JavaScript能够节约排错时刻，由于更简略定位过错来源。相同解耦也有助于保证可保护性。修正行为只触及JavaScript， 修正符号只触及要烘托的文件。

1.3.2 解耦CSS/JavaScript

Web 运用程序的另一层是 CSS，首要担任页面显现。JavaScript 和 CSS 严密相关，它们都建构在 HTML 之上，因而也常常一同运用。与 HTML和 JavaScript 的状况相似，CSS 也或许与 JavaScript 发生严密耦合。最常见的比便利是运用 JavaScript 修正个别款式，比方：

// CSS紧耦合到了JavaScript
element.style.color = 'red'
element.style.backgroundColor = 'blue'

由于CSS担任页面显现，所以任何款式的问题都应该经过CSS文件处理。可是，假如JavaScript直接修正个别款式（比方色彩），就会增 加一个排错时要考虑甚至要修正的要素。成果是JavaScript某种程度 上承当了页面显现的使命，与CSS成了严密耦合。假如将来有一天要修 改款式，那么CSS和JavaScript或许都需求修正。这对担任保护的开发者来说是一个噩梦。层与层的清晰解耦是必需的。

现代Web运用程序常常运用JavaScript改变款式，因而尽管不太或许彻底解耦CSS和JavaScript，但能够让这种耦合变成更松懈。这首要能够经过动态修正类名而不是款式来完结，比方：

// CSS与JavaScript松懈耦合
element.className = "edit";

经过修正元素的CSS类名，能够把大部分款式约束在CSS文件里。 JavaScript只担任修正运用款式的类名，而不直接影响元素的款式。 只需运用的类名没错，那么显现的问题就只跟CSS有关，而跟 JavaScript无关。

相同，保证层与层之间的恰当别离至关重要。显现出问题就应该只到 CSS中处理，行为出问题就应该只找JavaScript的问题。这些层之间的松懈耦合能够提高整个运用程序的可保护性。

1.3.3 解耦运用程序逻辑/作业处理程序

每个Web运用程序中都会有许多作业处理程序在监听各种作业。可是，其间很少能真实做到运用程序逻辑与作业处理程序别离。来看下面的比方：

function handleKeyPress(event) {
  if (event.keyCode == 13) {
    let target = event.target
    let value = 5 * parseInt(target.value)
    if (value > 10) {
      document.getElementById('error-msg').style.display = 'block'
    }
  }
}

这个作业处理程序除了处理作业，还包含了运用程序逻辑。这样做的问题是两层的。

  • 首要，除了作业没有办法触发运用程序逻辑，成果形成调试困难。假如没有发生预期的成果怎么办？是由于没有调用作业处理程序，仍是由于运用程序逻辑有过错？

  • 其次，假如后续作业也会对应相同的运用程序逻辑，则会导致代码重复，或许把它提取到独自的函数中。不管状况怎么，都会导致原本不必要的剩余作业。

更好的做法是将运用程序逻辑与作业处理程序分隔，各自担任处理各自的作业。作业处理程序应该专心于event 方针的相关信息，然后把这些信息传给处理运用程序逻辑的某些办法。例如，前面的比方能够重写为如下代码：

function validateValue(value) {
  value = 5 * parseInt(value)
  if (value > 10) {
    document.getElementById('error-msg').style.display = 'block'
  }
}
function handleKeyPress(event) {
  if (event.keyCode == 13) {
    let target = event.target
    validateValue(target.value)
  }
}

这样修正之后，运用程序逻辑跟作业处理程序就分隔了。 handleKeyPress() 函数只担任查看用户是不是按下了回车键 （event.keyCode 等于13 ），假如是则获得作业方针，并把方针值传给 validateValue() 函数，该函数包含运用程序逻辑。留意，validateValue() 函数中不包含任何依靠作业处理程序的代码。这个函数只担任接收一个值，并依据该值履行其他一切操作。

把运用程序逻辑从作业处理程序中别离出来有许多优点。

  • 首要，这能够让咱们以最少的作业量轻松地修正触发某些流程的作业。假如原来是经过鼠标单击触发流程，而现在又想增加键盘操作来触发，那么修正起来也很简略。

  • 其次，能够在不必增加作业的状况下测验代码，这样创立单元测验或主动化运用程序流都会更简略。

以下是在解耦运用程序逻辑和业务逻辑时应该留意的几点。

  • 不要把 event 方针传给其他办法，而是只传递 event 方针中必要的数据。

  • 运用程序中每个或许的操作都应该无需作业处理程序就能够履行。

  • 作业处理程序应该处理作业，而把后续处理交给运用程序逻辑。

做到上述几点能够给任何代码的可保护性带来巨大的提高，一同也能为将来的测验和开发供给许多或许性。

1.4 编码常规

编写可保护的JavaScript不只仅触及代码格局和标准，也触及代码做什么。企业开发Web运用程序一般需求许多人协同作业。这时分就需求保证每个人的浏览器环境都有稳定不变的规矩。为此，开发者应该恪守某些编码常规。

1.4.1 尊重方针一切权

JavaScript的动态特性意味着简直能够在任何时分修正任何东西。曩昔有人说，JavaScript中没有什么是神圣不行侵犯的，由于不能把任何东西符号为终究成果或许稳定不变。但ECMAScript 5引进防篡改方针之后，状况不同了。当然，方针默许仍是能够修正的。在其他言语中，在没有源代码的状况下，方针和类不行修正。JavaScript则答应在任何时分修正任何方针，因而就或许导致意外地掩盖默许行为。由于这门言语没有什么约束，所以就需求开发者自己约束自己。

在企业开发中，十分重要的编码常规便是尊重方针一切权，这意味着不要修正不归于你的方针。简略来讲，假如你不担任创立和保护某个方针及其结构函数或办法，就不应该对其进行任何修正。更详细一点说，便是如下常规。

  • 不要给实例或原型增加特点。
  • 不要给实例或原型增加办法。
  • 不要重界说已有的办法。

问题在于，开发者会假定浏览器环境以某种办法运转。修正了多个人运用的方针也就意味着会有过错发生。假定有人期望某个函数叫作 stopEvent() ，用于撤销某个作业的默许行为。然后，你把它给改了，除了撤销作业的默许行为，又增加了其他作业处理程序。可想而知，问题肯定会接踵而至。他人还认为这个函数只做最开端的那点事，但由于对它后来增加的副作用并不知情，因而很或许就会用错或许形成丢失。

以上规矩不只适用于自界说类型和方针，而且适用于原生类型和方针，比方Object 、String 、document 、window ，等等。考虑到浏览器厂商也有或许会在不揭露的状况下以非预期办法修正这些方针，潜在的风险就更大了。

有个盛行的Prototype库就发生过相似的作业。该库在document 方针上完结了 getElementsByClassName() 办法，回来一个Array 的实例，而这个实例上还增加了 each() 办法。jQuery的作者 John Resig 后来在自己的博客上剖析了这个问题形成的影响。他在博客中指出这个问题是由于浏览器也原生完结了相同的 getElementsByClassName() 办法形成的，但 Prototype 的同名办法回来的是Array 而非NodeList ，NodeList 没有 each() 办法。运用这个库的开发者之前会写这样的代码：

document.getElementsByClassName("selected").each(Element.hide);

尽管这样写在没有原生完结getElementsByClassName() 办法的浏览器里没有问题，但在完结它的浏览器里就会出问题。这是由于两个同名办法回来的成果不相同。咱们不能预见浏览器厂商将来会怎么修正原生方针，因而不管怎么修正它们都或许在将来某个时刻呈现冲 突时导致问题。

为此，最好的办法是永远不要修正不归于你的方针。只需你自己创立的才是你的方针，包含自界说类型和方针字面量。Array 、 document 等方针都不是你的，由于在你的代码履行之前它们现已存在了。能够按如下这样为方针增加新功用。

  • 创立包含想要功用的新方针，经过它与他人的方针交互。
  • 创立新自界说类型承继原本想要修正的类型，能够给自界说类型增加新功用。

许多JavaScript库现在支撑这种开发理念，这样不管浏览器怎样改变 都能够开展和习惯。

1.4.2 不声明大局变量

与尊重方针一切权密切相关的是尽或许不声明大局变量和函数。相同，这也联系到创立共同和可保护的脚本运转环境。最多能够创立一 个大局变量，作为其他方针和函数的命名空间。来看下面的比方：

// 两个大局变量：不要！
var name = 'Nicholas'
function sayName() {
  console.log(name)
}

以上代码声明晰两个大局变量：name 和 sayName() 。能够像下面这样把它们包含在一个方针中：

// 一个大局变量：引荐
var MyApplication = {
  name: 'Nicholas',
  sayName: function() {
    console.log(this.name)
  }
}

这个重写后的版别只声明晰一个大局方针 MyApplication 。该方针包含了 name 和 sayName() 。这样能够防止之前版别的几个问题。

  • 首要，变量 name 会掩盖 window.name 特点，而这或许会影响其他功用。
  • 其次，有助于辨明功用都会集在哪里。调用 MyApplication.sayName() 从逻辑上会暗示，呈现任何问题都能够在MyApplication 的代码中找原因。

这样一个大局方针能够扩展为命名空间的概念。命名空间触及创立一个方针，然后经过这个方针来露出能力。比方，Google Closure 库就运用了这样的命名空间来安排其代码。下面是几个比方。

  • goog.string ：用于操作字符串的办法。
  • goog.html.utils ：与HTML相关的办法。
  • goog.i18n ：与国际化（i18n）相关的办法。

方针goog 就相当于一个容器，其他方针包含在这儿面。只需运用方针以这种办法来安排功用，就能够称该方针为命名空间。整个Google Closure库都构建在这个概念之上，能够在同一个页面上与其他 JavaScript库共存。

关于命名空间，最重要的确认一个一切人都赞同的大局方针称号。这个称号要满足独特，不或许与其他人的抵触。大多数状况下，能够运用开发者地点的公司名，例如goog 或Wrox 。下面的比方演示了运用 Wrox 作为命名空间来安排功用：

// 创立大局方针
var Wrox = {};
// 创立命名空间
Wrox.ProJS = {};
// 增加其他方针
Wrox.ProJS.EventUtil = { ... };
Wrox.ProJS.CookieUtil = { ... };

在这个比方中，Wrox 是大局变量，然后在它的下面又创立了命名空间。假如一本书一切代码都保存在Wrox.ProJS 命名空间中，那么其他作者的代码就能够运用自己的方针来保存。只需每个人都遵循这个方法，就不必忧虑有人会掩盖这儿的EventUtil 或CookieUtil ，由于即便重名它们也只会呈现在不同的命名空间中。比方下面的比方：

// 为另一本书创立命名空间
Wrox.ProAjax = {};
// 增加其他方针
Wrox.ProAjax.EventUtil = { ... };
Wrox.ProAjax.CookieUtil = { ... };
// 能够照旧运用ProJS下面的方针
Wrox.ProJS.EventUtil.addHandler( ... );
// 以及ProAjax下面的方针
Wrox.ProAjax.EventUtil.addHandler( ... );

尽管命名空间需求多写一点代码，但从可保护性视点看，这个代价仍是十分值得的。命名空间能够保证代码与页面上的其他代码互不搅扰。

1.4.3 不要比较null

JavaScript不会主动做任何类型查看，因而就需求开发者担起这个职责。成果，许多JavaScript代码不会做类型查看。最常见的类型查看是看值是不是null。可是，与null 进行比较的代码太多了，其间许多由于类型查看不够而频频引发过错。比方下面的比方：

function sortArray(values) {
  if (values != null) {
    // 不要这样比较！
    values.sort(comparator)
  }
}

这个函数的意图是运用给定的比较函数对数组进行排序。为保证函数正常履行，values 参数有必要是数组。可是，if 句子在这儿只简略地查看了这个值不是null 。实际上，字符串、数值还有其他许多值能够经过这儿的查看，成果就会导致过错。

现实当中，单纯比较null 一般是不够的。查看值的类型就要真的查看类型，而不是查看它不能是什么。例如，在前面的代码中，values 参数应该是数组。为此，应该查看它到底是不是数组，而不是查看它不是null 。能够像下面这样重写那个函数：

function sortArray(values) {
  if (values instanceof Array) {
    // 引荐
    values.sort(comparator)
  }
}

此函数的这个版别能够过滤一切无效的值，底子不需求运用null 。

假如看到比较null 的代码，能够运用下列某种技能替换它。

  • 假如值应该是引证类型，则运用 instanceof 操作符查看其结构函数。

  • 假如值应该是原始类型，则运用 typeof 查看其类型。

  • 假如期望值是有特定办法名的方针，则运用 typeof 操作符保证 方针上存在给定姓名的办法。代码中比较null 的当地越少，就越简略明确类型查看的意图，然后消除不必要的过错。

1.4.4 运用常量

依靠常量的方针是从运用程序逻辑中别离数据，以便修正数据时不会引发过错。显现在用户界面上的字符串就应该以这种办法提取出来，能够便利完结国际化。URL也应该这样提取出来，由于跟着运用程序越来越杂乱，URL极有或许改变。根本上，像这种当地将来由于某种原因而需求修正时，或许就要找到某个函数并修正其间的代码。每次像这样修正运用程序逻辑，都或许引进新过错。为此，能够把这些或许会修正的数据提取出来，放在独自界说的常量中，以完结数据与逻辑别离。

要害在于把数据从运用它们的逻辑中别离出来。能够运用以下标准查看哪些数据需求提取。

  • 重复呈现的值 ：任何运用超越一次的值都应该提取到常量中，这样能够消除一个值改了而另一个值没改形成的过错。这儿也包含 CSS的类名。

  • 用户界面字符串 ：任何会显现给用户的字符串都应该提取出来，以便利完结国际化。

  • URL ：Web运用程序中资源的地址常常会发生改变，因而主张把一切URL会集放在一个当地管理。

  • 任何或许改变的值 ：任何时分，只需在代码中运用字面值，就问问自己这个值将来是否或许会变。假如答案是“是”，那么就应该把它提取到常量中。

运用常量是企业级JavaScript开发的重要技能，由于它能够让代码更简略保护，一同能够让代码免受数据改变的影响。

2. 功能

比较JavaScript刚面世时，现在每个网页中JavaScript代码的数量已有极大的增加。代码量的增加也带来了运转时履行JavaScript的功能问题。 JavaScript一开端便是一门解说型言语，因而履行速度比编译型言语要慢一些。Chrome是第一个引进优化引擎将JavaScript编译为原生代码的浏览器。随后，其他主流浏览器也紧随其后，完结了JavaScript编译。

即便到了编译JavaScript年代，仍或许写出运转慢的代码。不过，假如遵循一些根本方法，就能保证写出履行速度很快的代码。

2.1 作用域意识

跟着作用域链中作用域数量的增加，拜访当时作用域外部变量所需的时刻也会增加。拜访大局变量一直比拜访部分变量慢，由于有必要遍历作用域链。任何能够缩短遍历作用域链时刻的行动都能提高代码功能。

2.1.1 防止大局查找

改善代码功能十分重要的一件事，或许便是要提防大局查询。大局变量和函数比较于部分值一直是最费时刻的，由于需求阅历作用域链查找。来看下面的函数：

function updateUI() {
  let imgs = document.getElementsByTagName('img')
  for (let i = 0, len = imgs.length; i < len; i++) {
    imgs[i].title = `${document.title} image ${i}`
  }
  let msg = document.getElementById('msg')
  msg.innerHTML = 'Update complete.'
}

这个函数看起来好像没什么问题，但其间三个当地引证了大局 document 方针。假如页面的图片十分多，那么 for 循环中就需求引证 document 几十甚至上百次，每次都要遍历一次作用域链。

  • 经过在部分作用域中保存 document 方针的引证，能够显着提高这个函数的功能，由于只需求作用域链查找 。
  • 经过创立一个指向 document 方针的部分变量，能够经过将大局查找的数量约束为一个来提高这个函数的功能：
function updateUI() {
  let doc = document
  let imgs = doc.getElementsByTagName('img')
  for (let i = 0, len = imgs.length; i < len; i++) {
    imgs[i].title = `${doc.title} image ${i}`
  }
  let msg = doc.getElementById('msg')
  msg.innerHTML = 'Update complete.'
}

这儿先把 document 方针保存在部分变量 doc 中。然后用 doc 代替 了代码中一切的 document。这样调用这个函数只会查找一次作用域链，相对上一个版别，肯定会快许多。

因而，一个经验规矩便是，只需函数中有引证超越两次的大局方针，就应该把这个方针保存为一个部分变量。

2.1.2 不运用with句子

在功能很重要的代码中，应防止运用 with 句子。与函数相似，with 句子会创立自己的作用域，因而也会加长其间代码的作用域链。在 with 句子中履行的代码必定比在它外部履行的代码慢，由于作用域链查找时多一步。

实际编码时很少有需求运用with 句子的状况，由于它的首要用处是节约一点代码。大多数状况下，运用部分变量能够完结相同的作用，无须增加新作用域。下面看一个比方：

function updateBody() {
  with (document.body) {
    console.log(tagName)
    innerHTML = 'Hello world!'
  }
}

这段代码中的 with 句子让运用 document.body 更简略了。运用部分变量也能够完结相同的作用，如下：

function updateBody() {
  let body = document.body
  console.log(body.tagName)
  body.innerHTML = 'Hello world!'
}

尽管这段代码多了几个字符，但比运用 with 句子还更简略了解了， 由于 tagName 和 innerHTML 归于谁很明确。这段代码还经过把 document.body 保存在部分变量中来省去大局查找。

2.2 选择正确的办法

与其他言语相同，影响功能的要素一般触及算法或处理问题的办法。经验丰富的开发者知道用什么办法功能更佳。一般许多能在其他编程言语中提高功能的技能和办法相同也适用于JavaScript。

2.2.1 防止不必要的特点查找

在核算机科学中，算法杂乱度运用大表明法来表明。最简略一同也最快的算法能够表明为常量值或。然后，稍微杂乱一些的算法一同履行时刻也更长一些。下表列出了JavaScript中常见算法的类型。

表明法 称号 阐明
O(1) 常量 不管多少值，履行时刻都不变。表明简略值和保存在变量中的值
O(log n) 对数 履行时刻跟着值的增加而增加，但算法完结不需求读取每个值。 比方：二分查找
O(n) 线性 履行时刻与值的数量直接相关。比方：迭代数组的一切元素
O(n^2) 二次方 履行时刻跟着值的增加而增加，而且每个值至少要读取 次。例 子：刺进排序

常量值或O(1) ，指字面量和保存在变量中的值，表明读取常量值所需的时刻不会因值的多少而改变。读取常量值是功率极高的操作，因而十分快。来看下面的比方：

let value = 5
let sum = 10 + value
console.log(sum)

以上代码查询了4次常量值：数值5、变量value 、数值10和变量sum 。全体代码的杂乱度能够认为是O(1)。

在JavaScript中拜访数组元素也是O(1)操作，与简略的变量查找相同。因而，下面的代码与前面的比方功率相同：

let values = [5, 10]
let sum = values[0] + values[1]
console.log(sum)

运用变量和数组比较拜访方针特点功率更高，拜访方针特点的算法杂乱度是O(n)。拜访方针的每个特点都比拜访变量或数组花费的时刻长，由于查找特点名要搜索原型链。简略来说，查找的特点越多，履行时刻就越长。来看下面的比方：

let values = { first: 5, second: 10 }
let sum = values.first + values.second
console.log(sum)

这个比方运用两次特点查找来核算sum 的值。一两次特点查找或许不会有显着的功能问题，但几百上千次则肯定会拖慢履行速度。

特别要留意防止经过屡次查找获取一个值。例如，看下面的比方：

let query = window.location.href.substring(window.location.href.indexOf('?'))

这儿有6次特点查找：

  • 3次是为查找 window.location.href.substring()
  • 3次是为查找 window.location.href.indexOf()

经过数代码中呈现的点号数量，就能够知道有几次特点查找。以上代码功率特别低，这是由于运用了两次 window.location.href ，即相同的查找履行了两遍。

只需运用某个object 特点超越一次，就应该将其保存在部分变量中。第一次依然要用O(n)的杂乱度去拜访这个特点，但后续每次拜访就都是O(1)，这样便是质的提高了。例如，前面的代码能够重写为如下：

let url = window.location.href
let query = url.substring(url.indexOf('?'))

这个版别的代码只需4次特点查找，比之前节约了约33%。在大型脚本中假如能这样优化，或许就会显着改善功能。

一般，只需能够降低算法杂乱度，就应该尽量经过在部分变量中保存值来代替特点查找。另外，假如完结某个需求既能够运用数组的数值索引，又能够运用命名特点（比方NodeList 方针），那就都应该运用数值索引。

2.2.2 优化循环

循环是编程中常用的语法结构，因而在JavaScript中也十分常见。优化这些循环是功能优化的重要内容，由于循环会重复屡次运转相同的代码，所以运转时刻会主动增加。其他言语有许多关于优化循环的研讨，这些技能相同适用于JavaScript。优化循环的根本步骤如下。

  1. 简化终止条件 。由于每次循环都会核算终止条件，所以它应该尽或许地快。这意味着要防止特点查找或其他操作。

  2. 简化循环体 。循环体是最花时刻的部分，因而要尽或许优化。要保证其间不包含能够轻松转移到循环外部的密集核算。

  3. 运用后测验循环 。最常见的循环便是 for 和 while 循环，这两种循环都归于先测验循环。do-while 便是后测验循环，防止了对终止条件初始评估 ，因而应该会更快。

留意：在旧版浏览器中，从循环迭代器的最大值开端递减至0的功率更高。之所以这样更快，是由于JavaScript引擎用于查看循环分支条件的指令数更少。在现代浏览器中，正序仍是倒序不会有可感知的功能差异。因而能够选择最合适代码逻辑的迭代办法。

以上优化的作用能够经过下面的比方展现出来。这是一个简略的for 循环：

for (let i = 0; i < values.length; i++) {
  process(values[i])
}

这个循环会将变量 i 从 0 递加至数组values 的长度。假定处理这些值的顺序不重要，那么能够将循环变量改为递减的办法，如下所示：

for (let i = values.length - 1; i >= 0; i--) {
  process(values[i])
}

这一次，变量 i 每次循环都会递减。在这个过程中，终止条件的核算杂乱度也从查找 values.length 的变成了拜访 0 的。循环体只需一条句子，已不能再优化了。不过，整个循环可修正为后测验循环：

let i = values.length - 1
if (i > -1) {
  do {
    process(values[i])
  } while (--i >= 0)
}

这儿首要的优化是将终止条件和递减操作符兼并成了一条句子。然后，假如再想优化就只能去优化 process() 的代码，由于循环已没有能够优化的点了。

运用后测验循环时要留意，必定是至少有一个值需求处理一次。假如 这儿的数组是空的，那么会糟蹋一次循环，而先测验循环就能够防止这种状况。

2.2.3 打开循环

假如循环的次数是有限的，那么一般扔掉循环而直接屡次调用函数会更快。仍以前面的循环为例，假如数组长度一直相同，则或许对每个元素都调用一次 process() 功率更高：

// 扔掉循环
process(values[0])
process(values[1])
process(values[2])

这个比方假定 values 数组一直只需3个值，然后别离针对每个元素调用一次process() 。像这样打开循环能够节约创立循环、核算终止条件的耗费，然后让代码运转更快。

假如不能提前预知循环的次数，那么或许能够运用一种叫作达夫设备 （Duff’s Device）的技能。该技能是以其发明者Tom Duff命名的，他最早主张在C言语中运用该技能。在JavaScript完结达夫设备的人是 Jeff Greenberg。达夫设备的根本思路是以 8 的倍数作为迭代次数然后将循环打开为一系列句子。来看下面的比方：

// 来源：Jeff Greenberg在 JavaScript 中完结的达夫设备
// 假定 values.length > 0
let iterations = Math.ceil(values.length / 8)
let startAt = values.length % 8
let i = 0
do {
  switch (startAt) {
    case 0:
      process(values[i++])
    case 7:
      process(values[i++])
    case 6:
      process(values[i++])
    case 5:
      process(values[i++])
    case 4:
      process(values[i++])
    case 3:
      process(values[i++])
    case 2:
      process(values[i++])
    case 1:
      process(values[i++])
  }
  startAt = 0
} while (--iterations > 0)

这个达夫设备的完结首要经过用 values 数组的长度除以 8 核算需求多少次循环。Math.ceil() 用于保证这个值是整数。startAt 变量保存着仅依照除以 8 来循环不会处理的元素个数。第一次循环履行时，会查看 startAt 变量，以确认要调用 process() 多少次。例如，假定数组有 10 个元素，则 startAt 变量等于 2，因而第一次循环只会调用 process() 两次。第一次循环结尾，startAt 被重置为 0。所以后续每次循环都会调用 8 次 process() 。这样打开之后，能够加快大数据集的处理速度。

Andrew B. King 在 Speed Up Your Site 一书中提出了更快的达夫设备完结，他将 do-while 循环分成了两个独自的循环，如下所示：

// 来源：Speed Up Your Site（New Riders，2003）
let iterations = Math.floor(values.length / 8)
let leftover = values.length % 8
let i = 0
if (leftover > 0) {
  do {
    process(values[i++])
  } while (--leftover > 0)
}
do {
  process(values[i++])
  process(values[i++])
  process(values[i++])
  process(values[i++])
  process(values[i++])
  process(values[i++])
  process(values[i++])
  process(values[i++])
} while (--iterations > 0)

在这个完结中，变量 leftover 保存着只依照除以 8 来循环不会处理， 因而会在第一个循环中处理的次数。处理完这些额定的值之后进入主循环，每次循环调用 8 次 process() 。这个完结比原始的完结快约 40%。

打开循环关于大型数据集能够节约许多时刻，但关于小型数据集来说，则或许不值得。由于完结相同的使命需求多写许多代码，所以假如处理的数据量不大，那么显着没有必要。

2.2.4 防止重复解说

重复解说的问题存在于 JavaScript 代码尝试解说 JavaScript 代码的情形。在运用 eval() 函数或 Function 结构函数，或许给 setTimeout() 传入字符串参数时会呈现这种状况。下面是几个比方：

// 对代码求值：不要
eval("console.log('Hello world!')")
// 创立新函数：不要
let sayHi = new Function("console.log('Hello world!')")
// 设置超时函数：不要
setTimeout("console.log('Hello world!')", 500)

在上面所列的每种状况下，都需求重复解说包含JavaScript代码的字符串。这些字符串在初始解析阶段不会被解说，由于代码包含在字符串里。这意味着在JavaScript运转时，有必要发动新解析器实例来解析这些字符串中的代码。实例化新解析器比较费时刻，因而这样会比直接包含原生代码慢。

这些状况都有对应的处理方案。很少有状况肯定需求运用 eval() ， 因而应该尽或许不运用它。此时，只需把代码直接写出来就好了。关于 Function 结构函数，重写为常规函数也很简略。而调用 setTimeout() 时则能够直接把函数作为第一个参数。比方：

// 直接写出来
console.log('Hello world!')
// 创立新函数：直接写出来
let sayHi = function() {
  console.log('Hello world!')
}
// 设置超时函数：直接写出来
setTimeout(function() {
  console.log('Hello world!')
}, 500)

为了提高代码功能，应该尽量防止运用要当作JavaScript代码解说的字符串。

2.2.5 其他功能优化留意事项

在评估代码功能时还有一些当地需求留意。下面列出的尽管不是首要问题，但在运用比较频频的时分也或许有所不同。

  • 原生办法很快 。应该尽或许运用原生办法，而不是运用 JavaScript 写的办法。原生办法是运用C或C++等编译型言语写的，因而比JavaScript写的办法要快得多。JavaScript 中常常被忽视的是 Math 方针上那些履行杂乱数学运算的办法。这些办法总是比履行相同使命的JavaScript函数快得多，比方求正弦、余 弦等。

  • switch 句子很快 。假如代码中有杂乱的 if-else 句子，将其转换成switch 句子能够变得更快。然后，经过重新安排分支，把最或许的放前面，不太或许的放后面，能够进一步提高功能。

  • 位操作很快 。在履行数学运算操作时，位操作必定比任何布尔值或数值核算更快。选择性地将某些数学操作替换成位操作，能够极大提高杂乱核算的功率。像求模、逻辑AND与和逻辑OR或都很合适代替成位操作。

2.3 句子最少化

JavaScript代码中句子的数量影响操作履行的速度。一条能够履行多个操作的句子，比多条句子中每个句子履行一个操作要快。那么优化的方针便是寻觅能够兼并的句子，以削减整个脚本的履行时刻。为此，能够参阅如下几种方法。

2.3.1 多个变量声明

// 有四条句子：糟蹋
let count = 5
let color = 'blue'
let values = [1, 2, 3]
let now = new Date()

在强类型言语中，不同数据类型的变量有必要在不同的句子中声明。但在JavaScript中，一切变量都能够运用一个 let 句子声明。前面的代码能够改写为如下：

// 一条句子更好
let count = 5,
  color = 'blue',
  values = [1, 2, 3],
  now = new Date()

这儿运用一个 let 声明晰一切变量，变量之间以逗号分隔。这种优化很简略做到，且比运用多条句子履行速度更快。

2.3.2 刺进迭代性值

任何时分只需运用迭代性值（即会递加或递减的值），都要尽或许运用组合句子。来看下面的代码片段：

let name = values[i]
i++

前面代码中的两条句子都只需一个作用：

  • 第一条从 values 中获得一个值并保存到 name 中
  • 第二条递加变量 i

把迭代性的值刺进第一条句子就能够将它们兼并为一条句子：

let name = values[i++]

这一条句子完结了前面两条句子完结的作业。由于递加操作符是后缀办法的，所以 i 在句子其他部分履行完结之前是不会递加的。只需遇到相似的状况，就要尽量把迭代性值刺进到上一条运用它的句子中。

2.3.3 运用数组和方针字面量

两种运用数组和方针的办法：结构函数和字面量。运用结构函数一直会发生比单纯刺进元素或界说特点更多的句子，而字面量只需一条句子即可完结全部操作。来看下面的比方：

// 创立和初始化数组用了四条句子：糟蹋
let values = new Array()
values[0] = 123
values[1] = 456
values[2] = 789
// 创立和初始化方针用了四条句子：糟蹋
let person = new Object()
person.name = 'Nicholas'
person.age = 29
person.sayName = function() {
  console.log(this.name)
}

在这个比方中，别离创立和初始化了一个数组和一个方针。两件事都 用了四条句子：一条调用结构函数，三条增加数据。这些句子很简略转换成字面量办法:

// 一条句子创立并初始化数组
let values = [123, 456, 789]
// 一条句子创立并初始化方针
let person = {
  name: 'Nicholas',
  age: 29,
  sayName() {
    console.log(this.name)
  }
}

重写后的代码只需两条句子：一条创立并初始化数组，另一条创立并初始化方针。相关于前面运用了8条句子，这儿运用两条句子，削减了 75% 的句子量。关于数千行的JavaScript代码，这样的优化作用或许更显着。

应尽或许运用数组或方针字面量，以消除不必要的句子。

留意：削减代码中的句子量是很不错的方针，但不是肯定的规律。一味追求句子最少化，或许导致一条句子容纳过多逻辑，终究难以了解。

2.4 优化DOM交互

在一切JavaScript代码中，触及DOM的部分无疑是十分慢的。DOM操作和交互需求占用许多时刻，由于常常需求重新烘托整个或部分页面。此外，看起来简略的操作也或许花费很长时刻，由于DOM中携带着许多信息。了解怎么优化DOM交互能够极大地提高脚本的履行速度。

2.4.1 实时更新最小化

拜访DOM时，只需拜访的部分是显现页面的一部分，便是在履行实时更新操作。之所以称其为实时更新，是由于触及当即（实时）更新页面 的显现，让用户看到。每次这样的更新，不管是刺进一个字符仍是删去页面上的一节内容，都会导致功能丢失。这是由于浏览器需求为此重新核算数千项目标，之后才干履行更新。实时更新的次数越多，履行代码所需的时刻也越长。反之，实时更新的次数越少，代码履行就越快。来看下面的比方：

let list = document.getElementById('myList'),
  item
for (let i = 0; i < 10; i++) {
  item = document.createElement('li')
  list.appendChild(item)
  item.appendChild(document.createTextNode('Item ${i}'))
}

以上代码向列表中增加了10项。每增加1项，就会有两次实时更新：一次增加<li>元素，一次为它增加文本节点。由于要增加10项，所以整个操作总共要履行20次实时更新。

为处理这儿的功能问题，需求削减实时更新的次数。有两个办法能够完结这一点。

  • 第一个办法是从页面中移除列表，履行更新，然后再把 列表插回页面中相同的位置。这个办法并不行取，由于每次更新时页面都会闪耀。

  • 第二个办法是运用文档片段构建 DOM 结构，然后一次性将 它增加到 list 元素。这个办法能够削减实时更新，也能够防止页面闪耀。比方：

let list = document.getElementById('myList'),
  fragment = document.createDocumentFragment(),
  item
for (let i = 0; i < 10; i++) {
  item = document.createElement('li')
  fragment.appendChild(item)
  item.appendChild(document.createTextNode('Item ' + i))
}
list.appendChild(fragment)

这样修正之后，完结相同的操作只会触发一次实时更新。这是由于更新是在增加完一切列表项之后一次性完结的。文档片段在这儿作为新创立项意图暂时占位符。最终，运用 appendChild() 将一切项目都增加到列表中。别忘了，在把文档片段传给 appendChild() 时，会把片段的一切子元素增加到父元素，片段本身不会被增加。

只需是有必要更新DOM，就尽量考虑运用文档片段来预先构建DOM结构，然后再把构建好的DOM结构实时更新到文档中。

2.4.2 运用innerHTML

在页面中创立新DOM节点的办法有两种：运用DOM办法如 createElement() 和 appendChild()，以及运用 innerHTML。 关于少量DOM更新，这两种技能差异不大，但关于许多DOM更新，运用 innerHTML 要比运用标准DOM办法创立相同的结构快许多。

在给 innerHTML 赋值时，后台会创立 HTML 解析器，然后会运用原生 DOM 调用而不是 JavaScript 的 DOM 办法来创立 DOM 结构。原生DOM办法速度更快，由于该办法是履行编译代码而非解说代码。前面的比方假如运用 innerHTML 重写便是这样的：

let list = document.getElementById('myList'),
  html = ''
for (let i = 0; i < 10; i++) {
  html += '<li>Item ${i}</li>'
}
list.innerHTML = html

以上代码结构了一个HTML字符串，然后将它赋值给 list.innerHTML ，成果也会创立恰当的DOM结构。尽管拼接字符串也会有一些功能损耗，但这个技能依然比履行屡次DOM操作速度更快。

与其他DOM操作相同，运用 innerHTML 的要害在于最小化调用次数。 例如，下面的代码运用innerHTML 的次数就太多了：

let list = document.getElementById('myList')
for (let i = 0; i < 10; i++) {
  list.innerHTML += '<li>Item ${i}</li>' // 不要
}

这儿的问题是每次循环都会调用 innerHTML ，因而功率极低。事实上，调用 innerHTML 也应该看成是一次实时更新。构建好字符串然后调用一次 innerHTML 比屡次调用 innerHTML 快得多。

留意：运用 innerHTML 能够提高功能，但也会露出巨大的 XSS 攻击面。不管何时运用它填充不受控的数据，都有或许被攻击者注入可履行代码。此时有必要要留神。

2.4.3 运用作业托付

大多数 Web 运用程序会许多运用作业处理程序完结用户交互。一个页面中作业处理程序的数量与页面响运用户交互的速度有直接联系。为了削减对页面呼应的影响，应该尽或许运用作业托付。

作业托付运用了作业的冒泡。任何冒泡的作业都能够不在作业方针上，而在方针的任何祖先元素上处理。基于这个认知，能够把作业处理程序增加到担任处理多个方针的高层元素上。只需或许，就应该在文档级增加作业处理程序，由于在文档级能够处理整个页面的作业。

2.4.4 留意HTMLCollection

由于Web运用程序存在很大的功能问题，HTMLCollection 方针是有缺陷。任何时分，只需拜访HTMLCollection ，不管是它的特点仍是办法，就会触发查询文档，而这个查询相当耗时。削减拜访HTMLCollection 的次数能够极大地提高脚本的功能。

或许优化 HTMLCollection 拜访最要害当地便是循环了。之前，咱们谈论过要把核算 HTMLCollection 长度的代码转移到 for 循环初始化的部分。来看下面的比方：

let images = document.getElementsByTagName('img')
for (let i = 0, len = images.length; i < len; i++) {
  // 处理
}

这儿的要害是把 length 保存到了 len 变量中，而不是每次都读一次 HTMLCollection 的 length 特点。在循环中运用 HTMLCollection 时，应该首要获得对要运用的元素的引证，如下面所示。这样才干防止在循环体内屡次调用 HTMLCollection ：

let images = document.getElementsByTagName('img'),
  image
for (let i = 0, len = images.length; i < len; i++) {
  image = images[i]
  // 处理
}

这段代码增加了image 变量，用于保存当时的图片。有了这个部分变 量，就不需求在循环中再拜访images HTMLCollection 了。

编写JavaScript代码时，要害是要记住，只需回来HTMLCollection 方针，就应该尽量不拜访它。以下情形会回来HTMLCollection ：

  • 调用 getElementsByTagName() ；
  • 读取元素的 childNodes 特点；
  • 读取元素的 attributes 特点；
  • 拜访特殊调集，如 document.form 、document.images 等。

了解什么时分会碰到 HTMLCollection 方针并恰当地运用它，有助于显着地提高代码履行速度。

3. 布置

任何JavaScript处理方案最重要的部分或许便是把网站或Web运用程序布置到线上环境了。在此之前咱们已完结了许多作业，包含架构方面和优化方面的。现在到了把代码移出开发环境，发布到网上，让用户去运用它的时分了。不过，在发布之前还需求处理一些问题。

3.1 构建流程

准备发布JavaScript代码时最重要一环是准备构建流程。开发软件的典型方法是编码、编译和测验。换句话说，首要要写代码，然后编译，之后运转并保证它能够正常作业。

但由于JavaScript不是编译型言语，所以这个流程常常会变成编码、测验。你写的代码跟在浏览器中测验的代码相同。这种办法的问题在于代码并不是最优的。你写的代码不应该不做任何处理就直接交给浏览器，原因如下。

  • 知识产权问题 ：假如把满是注释的代码放到网上，其他人就很简略了解你在做什么，重用它，并或许发现安全漏洞。
  • 文件巨细 ：你写的代码可读性很好，简略保护，但功能不好。浏览器不会由于代码中剩余的空格、缩进、冗余的函数和变量名而受益。
  • 代码安排 ：为保证可保护性而安排的代码不必定合适直接交付给浏览器。

为此，需求为JavaScript文件树立构建流程。

3.1.1 文件结构

构建流程首要界说在源代码控制中存储文件的逻辑结构。最好不要在一个文件中包含一切JavaScript代码。相反，要遵循面向方针编程言语的典型方法，把方针和自界说类型保存到自己独立的文件中。这样能够让每个文件只包含最小量的代码，让后期修正更便利，也不易引 入过错。

此外，在运用并发源代码控制体系（如Git、CVS或 Subversion）的环境中，这样能够削减兼并时发生抵触的风险。

留意，把代码分散到多个文件是从可保护性而不是布置视点出发的。关于布置，应该把一切源文件兼并为一个或多个汇总文件。Web运用程序运用的JavaScript文件越少越好，由于HTTP恳求对某些Web运用程序而言是首要的功能瓶颈。而且，运用 <script> 标签包含 JavaScript 是阻塞性操作，这导致代码下载和履行期间中止一切其他下载使命。 因而，要尽量以符合逻辑的办法把JavaScript代码安排到布置文件中。

3.1.2 使命运转器

假如要把许多文件组合成一个运用程序，很或许需求使命运转器主动完结一些使命。使命运转器能够完结代码查看、打包、转译、发动本地服务器、布置，以及其他能够脚本化的使命。

许多时分，使命运转器要经过命令行界面来履行操作。因而你的使命运转器或许仅仅是一个辅助安排和排序杂乱命令行调用的东西。从这个意义上说，使命运转器在许多方面十分像 .bashrc 文件。其他状况下，要在主动化使命中运用的东西或许是一个兼容的插件。

假如你运用 Node.js 和 npm 打印 JavaScript 资源，Grunt 和 Gulp 是两个主流的使命运转器。它们十分稳健，其使命和指令都是经过装备文件，以纯 JavaScript 办法指定的。运用 Grunt 和 Gulp 的优点是它们别离有各自的插件生态，因而能够直接运用npm包。

3.1.3 摇树优化

摇树优化（tree shaking）是十分常见且极为有效的削减冗余代码的战略。运用静态模块声明风格意味着构建东西能够确认代码各部分之间的依靠联系。更重要的是，摇树优化还能确认代码中的哪些内容是彻底不需求的。

完结了摇树优化战略的构建东西能够剖析出选择性导入的代码，其他模块文件中的代码能够在终究打包得到的文件中彻底省掉。假定下面是个示例运用程序：

import { foo } from './utils.js'
console.log(foo)
export const foo = 'foo'
export const bar = 'bar' // unused

这儿导出的 bar 就没有被用上，而构建东西能够很简略发现这种状况。在履行摇树优化时，构建东西会将bar 导出彻底扫除在打包文件之外。静态剖析也意味着构建东西能够确认未运用的依靠，相同也会扫除去。经过摇树优化，终究打包得到的文件能够减肥许多。

3.1.4 模块打包器

以模块办法编写代码，并不意味着有必要以模块办法交付代码。一般，由许多模块组成的JavaScript代码在构建时需求打包到一同，然后只交付一个或少数几个JavaScript文件。

模块打包器的作业是辨认运用程序中触及的JavaScript依靠联系，将它们组合成一个大文件，完结对模块的串行安排和拼接，然后生成终究供给给浏览器的输出文件。

能够完结模块打包的东西十分多。Webpack、Rollupt 和 Browserify 只是其间的几个，能够将基于模块的代码转换为遍及兼容的网页脚本。

3.2 验证

即便已呈现了能够了解和支撑JavaScript的IDE，大多数开发者仍经过在浏览器中运转代码来验证自己的语法。这种办法有许多问题。

  • 首要，如此验证不简略主动化，也不便利从一个体系移植到另一个体系。

  • 其次，除了语法过错，只需运转的代码才或许报错，没有运转到的代码则无法验证。有 一些东西能够帮咱们发现JavaScript代码中潜在的问题，最盛行的是 Douglas Crockford的JSLint和ESLint。

这些代码查看东西能够发现JavaScript代码中的语法过错和常见的编码过错。下面是它们会陈述的一些问题：

  • 运用 eval() ；
  • 运用未声明的变量；
  • 遗漏了分号；
  • 不恰当地换行；
  • 不正确地运用逗号；
  • 遗漏了包含句子的括号；
  • 遗漏了switch 分支中的 break ；
  • 重复声明变量；
  • 运用了 with ；
  • 过错地运用等号（应该是两个或三个等号）；
  • 履行不到的代码。

在开发过程中增加代码查看东西有助于防止犯错。引荐开发者在构建流程中也参加代码查看环节，以便在潜在问题成为过错之前辨认它们。

3.3 紧缩

谈到JavaScript文件紧缩，实际上首要是两件事：代码巨细 （code size）和 传输负载 （wire weight）。

  • 代码巨细指的是浏览器需求解析的字节数

  • 而传输负载是服务器实际发送给浏览器的字节数。

在Web开发的前期阶段，这两个数值简直持平，服务器发送给浏览器的是未经修正的源文件。而今日，这两个数值不或许持平，实际上也不应该持平。

3.3.1 代码紧缩

JavaScript不是编译成字节码，而是作为源代码传输的，所以源代码文件一般包含对浏览器的JavaScript解说器没有用的额定信息和格局。JavaScript紧缩东西能够把源代码文件中的这些信息删去，并在保证程序逻辑不变的前提下缩小文件巨细。

注释、额定的空格、长变量或函数名都能提高开发者的可读性，但对浏览器而言这些都是剩余的字节。紧缩东西能够经过如下操作削减代码巨细：

  • 删去空格（包含换行）；
  • 删去注释；
  • 缩短变量名、函数名和其他标识符。

一切JavaScript文件都应该在布置到线上环境前进行紧缩。在构建流程中参加这个环节紧缩JavaScript文件是很简略的。

3.3.2 JavaScript编译

相似于最小化，JavaScript代码编译一般指的是把源代码转换为一种逻辑相同但字节更少的办法。与最小化的不同之处在于，编译后代码的结构或许不同，但依然具有与原始代码相同的行为。编译器经过输入全部 JavaScript 代码能够对程序流履行稳健的剖析。

编译或许会履行如下操作：

  • 删去未运用的代码；
  • 将某些代码转换为更简洁的语法；
  • 大局函数调用、常量和变量行内化

3.3.3 JavaScript 转译

咱们提交到项目库房中的代码与浏览器中运转的代码不相同。ES6、 ES7和ES8都为ECMAScript标准扩充增加了更好用的特性，但不同浏览器支撑这些标准的步调并不共同。

经过JavaScript转译，能够在开发时运用最新的语法特性而不必忧虑浏览器的兼容性问题。转译能够将现代的代码转换成更早的 ECMAScript版别，一般是ES3或ES5，详细取决于你的需求。这样能够 保证代码能够跨浏览器兼容。

留意：“转译”（transpilation）和“编译”（compilation） 常常被人当成同一个术语混用。编译是将源代码从一种言语转换为另一种言语。转译在本质上跟编译是相同的，只是方针言语与源言语是一种言语的不同等级的笼统。因而，把ES6/ES7/ES8代码 转换为ES3/ES5代码从技能视点看既是编译也是转译，只是转译更为确切一些。

3.3.4 HTTP紧缩

传输负载是从服务器发送给浏览器的实际字节数。这个字节数不必定与代码巨细相同，由于服务器和浏览器都具有紧缩能力。一切当时主流的浏览器（IE/Edge、Firefox、Safari、Chrome和Opera）都支撑客户端解紧缩收到的资源。服务器则能够依据浏览器经过恳求头部 （Accept-Encoding）标明自己支撑的格局，选择一种用来紧缩 JavaScript文件。

在传输紧缩后的文件时，服务器呼应的头部会有字段（Content-Encoding）标明运用了哪种紧缩格局。浏览器看到这个头部字段后，就会依据这个紧缩格局进行解紧缩。成果是经过网络传输的字节数显着小于原始代码巨细。

例如，运用Apache服务器上的两个模块（mod_gzip 和 mod_deflate ）能够削减原始JavaScript文件的约70%。这很大程度上是由于JavaScript的代码是纯文件，所以紧缩率十分高。削减经过网络传输的数据量意味着浏览器能更快收到数据。

留意，服务器紧缩和浏览器解紧缩都需求时刻。不过比较于经过传入更少的字节数而节约的时刻，全体时刻应该是削减的。

留意：大多数Web服务器（包含开源的和商业的）具有HTTP紧缩 能力。关于怎么正确地装备紧缩，请参阅相关服务器的文档。

4. 小结

跟着JavaScript开发日益老练，最佳实践不断涌现。曾经的业余爱好现在 也成为了正式的职业。因而，前端开发也需求像其他编程言语相同，注重 可保护性、功能优化和布置。

1. 为保证JavaScript代码的可保护性，能够参阅如下编码常规。

  • 其他言语的编码常规能够作为增加注释和确认缩进的参阅，但 JavaScript作为一门合适松懈类型的言语也有自己的一些特殊要求。

  • 由于JavaScript有必要与HTML和CSS共存，因而各司其职尤为重要：JavaScript担任界说行为，HTML担任界说内容，而CSS担任界说外观。

  • 假如三者职责混淆，则或许导致难以调试的过错和可保护性问题。

2. 跟着Web运用程序中JavaScript代码量的激增，功能也越来越重要。因而应该牢记如下这些事项。

  • 履行JavaScript所需的时刻直接影响网页功能，其重要性不容忽视。

  • 许多合适C言语的功能优化战略相同也合适JavaScript，包含循环打开和运用switch 句子而不是if 句子。

  • 另一个需求重视的方面是DOM交互很费时刻，因而应该尽或许约束DOM 操作的数量。

3. 开发Web运用程序的最终一步是上线布置。以下是本文谈论的相关要点。

  • 为辅助布置，应该树立构建流程，将JavaScript文件兼并为较少的（最好是只需一个）文件。

  • 构建流程能够完结许多源代码处理使命的主动化。例如，能够运转 JavaScript验证程序，保证没有语法过错和潜在的问题。

  • 紧缩能够让文件在布置之前变得尽量小。

  • 启用HTTP紧缩能够让网络传输的JavaScript文件尽或许小，然后提高 页面的全体功能。

每文一句：积累知识，胜过积蓄金银。

本次的共享就到这儿，假如本章内容对你有所协助的话能够点赞+收藏。文章有不对的当地欢迎指出，有任何疑问都能够在谈论区留言。期望大家都能够有所收获，大家一同探讨、进步！

本文正在参加「金石计划 . 分割6万现金大奖」