共计 1866 个字符，预计需要花费 5 分钟才能阅读完成。
本文参考 https://hacks.mozilla.org/201…，建议大家读原文。
ES6 发布了官方的，标准化的 Module 特性，这一特性花了整整 10 年的时间。但是，在这之前，大家也都有在 module 化地编写 JS 代码。比如在 server 端的 NodeJS，它是对 CommonJS 的一个实现；Require.js 则是可以在浏览器使用，它是对 AMD 的一个实现。
ES6 官方化了 Module，那么在浏览器端我们不再需要在引入额外的文件来实现模块化的编程（当然浏览器的支持与否，这里暂不讨论）。ES Module 的使用也很简单，相关语法也很少，无非就是一个 import 和 export。但是，对于 ES module 到底是如何工作的，它又和之前的 CommonJS 和 AMD 有什么差别呢？这是接下来将要讨论的内容。
一：没有模块化的编程存在什么问题？
编写 JS 代码，主要是对于对变量的操作：给变量赋值，变量之间进行各种运算。正因为你的大部分代码都是对变量的操作，关于如何组织你的变量对于如何写好代码和维护就显得至关重要了。
当只有少量的变量需要考虑的时候，JavaScript 提供了“scope（作用域）”来帮助你。因为在 JavaScript 里面，一个 function 不能访问定义在别的 function 里面的变量。
但是，这样同时也带来一个问题，假如 functionA 想要使用 functionB 的变量怎么办呢？一个通用的办法就是把 functionB 的变量放到 functionA 的上一层作用域。典型的是以前在使用 jQuery 的时候，如果要使用 jQuery 里面的方法，先要保证 jQuery 在全局作用域。
但是这样做的问题也很多：
1: 所有的 script 标签必须保证正确的顺序，这使得代码的维护变得异常艰难。2: 全局作用域被污染。二：模块化编程如何解决上面提到的问题？
模块，把相关的变量和 function 组织到一起，形成一个所谓的 module scope（模块作用域）。在这个作用域里面的变量和 function 之间彼此是可见的。
与 function 不同的是，一个模块可以决定自己内部的哪些变量，类，或者 function 可以被其他模块可见，这个决定我们叫做“export（导出）”。而其他的模块也就可以选择性地使用这个模块导出的内容，我们通过“import（导入）”来实现。
一旦有了导入和导出，我们就可以把我们的程序按照指责划分为一个个模块，大的模块可以继续划分为更小的模块，最终这些模块组合到一起，搭建起了我们整个程序，就像乐高一样。
三：ES Module 的工作原理之 Module Instances
当你在模块化编程的时候，你就创建了一棵依赖树。不同依赖之间的链接来源于你使用的的每一条 ”import” 语句。
就是通过这些 ”import” 语句，浏览器和 Node 才知道它们到底要加载哪些代码。你给浏览器或者 Node 一个依赖树的入口文件，从这个入口文件开始，浏览器或者 Node 就沿着每一条 ”import” 语句找到后面的代码。
但是，浏览器却使用不了这些文件。所有的这些文件都必须要转变为一系列被叫做“Module Records（模块记录）的数据解构，这样才能被浏览器识别这些文件到底在干什么。
在这之后，module record 需要被转化为“module instance（模快实例）”。一个 module instance 包含 2 种东西：code 和 state。
code 就是一系列的操作指令，就像菜单一样。但是，光有菜单，并不能作出菜，你还需要原材料。而 state 就是原材料。State 就是变量在每一个特地时间点的值。当然，这些变量只是内存里面一个个保存着值的小盒子的小名而已。
而我们真正需要的就是每一个模块都有一个 module instance。模块的加载就是从这个入口文件开始，最后得到包含所有 module instance 的完整图像。
对于，ES Module 来说，这需要经历三个步骤：
1: Construction（构造）找到，下载所有的文件并且解析为 module records。
2: Instantiation（实例化）
3: Evaluation（求值）
四：Module Instances 的产生步骤
五：Module Instances 的产生步骤之 Construction
step1: Finding the file and fetching it
step1: Parsing
六：Module Instances 的产生步骤之 Instantiation
七：Module Instances 的产生步骤之 Evaluation
