# ES modules

ES Module的使用也很简单，相关语法也很少，核心是import和export

模块解决什么问题

管理变量
加载脚本顺序

ES Module 模块实例

从入口文件开始，浏览器或者Node就沿着每一条"import"语句找到下面的代码。

但是，浏览器却使用不了这些文件。所有的文件都必须要解析转换成模块记录的数据结构，这样浏览器才能明白这些文件的内容。

一个模块实例包含2种东西：code和state。

code就是一系列的操作指示，就像菜单一样。

State就是变量在每一个特地时间点的值

模块实例的产生步骤

对于，ES Module来说，这需要经历三个步骤：

1: Construction（构造）- 找到，下载所有的文件并且解析为模块记录。
2: Instantiation（实例化）- 在内存中找到来放置所有导出的值（但不要用值填充它们）。然后让导出和导入都指向内存中的那些盒子。这称为链接
3: Evaluation（赋值）- 执行代码，得到变量的值然后填充。

模块实例的构建

在构建阶段，每个模块都会发生三件事。

找出从哪里下载包含模块的文件（又名模块解析）
获取文件（通过从 URL 下载或从文件系统加载）
将文件解析为模块记录

1.查找入口文件

2.解析

现在我们已经获取了这个文件，我们需要将它解析成一个模块记录。这有助于浏览器了解模块的不同部分是什么

3.实例化

为了实例化模块图，引擎将执行所谓的深度优先后序遍历。这意味着它将向下到图的底部 — 到底部的不依赖任何其他东西的依赖项 — 并设置它们的导出

4.赋值

demo

<script type="module">
  import { addText } from './index.js';

  addText('test');
</script>

// index.js
export function addText(text) {
  const div = document.createElement('div');
  div.textContent = text;
  document.body.appendChild(div);
}

ES modules 学习-2