4.学习 ES-module

这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战

es module, ES Module的使用也很简单，相关语法也不多，核心是import和export

全部主流浏览器都将支持 ES 模块

1.模块解决什么问题？

用 JavaScript 编码就是管理变量。这一切都是关于为变量赋值，或为变量添加数字，或将两个变量组合在一块儿并将它们放入另外一个变量中

let a = 1;
a += 2
复制代码

因为做用域在 JavaScript 中的工做方式，函数没法访问在其余函数中定义的变量

若是您确实想在范围以外共享变量怎么办？处理这个问题的一种常见方法是将它放在您上方的范围内……例如，放在全局范围内,但它们会致使一些烦人的问题。

首先，全部脚本标签都须要按正确的顺序排列。而后你必须当心确保没有人把这个顺序弄乱。

若是您确实弄乱了该顺序，那么在运行过程当中，您的应用程序将抛出错误

一旦您可以在模块之间导出和导入变量，就能够更轻松地将代码分解为能够相互独立工做的小块。而后你能够组合和从新组合这些块，有点像乐高积木，从同一组模块建立全部不一样类型的应用程序。

2.模块如何提供帮助？

模块提供了一种更好的方式来组织这些变量和函数。使用模块，能够将有意义的变量和函数组合在一块儿。

这将这些函数和变量放入模块范围。模块做用域可用于在模块中的函数之间共享变量

Module Instances

当使用模块进行开发时，会构建一个依赖关系图。不一样依赖项之间的链接来自使用的任何导入语句

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

main.js

import { count } from './counter.js';
import { render } from './dispaly.js';
复制代码

可是，浏览器却使用不了这些文件。全部的文件都必需要转变为一系列被叫作“Module Records（模块记录）的数据结构，这样浏览器才能明白这些文件的内容。

在这以后，module record须要被转化为“module instance（模快实例）”。一个module instance包含2种东西：code和state。

code就是一系列的操做指令，就像菜单同样。可是，光有菜单，并不能做出菜，你还须要原材料。

而state就是原材料。State就是变量在每个特意时间点的值。固然，这些变量只是内存里面一个个保存着值的小盒子的小名而已。

模块实例的产生步骤

对于，ES Module来讲，这须要经历三个步骤：

• 1: 构建- 找到，下载全部的文件而且解析为module records。
• 2: Instantiation（实例化）- 在内存里找到全部的“盒子”，把全部导出的变量放进去（可是暂时还不求值）。而后，让导出和导入都指向内存里面的这些盒子。这叫作“linking(连接)”。
• 3: Evaluation（求值）- 执行代码，获得变量的值而后放到这些内存的“盒子”里。

构建

对于每个模块来讲，构建阶段，每一个模块都会发生三件事:

• 1: 去哪里下载包含模块的文件（又叫“ module resolution（模块识别）”）
• 2: 获取文件（经过从一个URL下载或者从文件系统加载）
• 3: 把文件解析为module record（模块记录）

1.查找文件并获取它

加载程序将负责查找文件并下载它。首先它须要找到入口点文件。在 HTML 中，您可使用脚本标记告诉加载器在哪里找到它。

<script src="main.js" type="module"></script>
复制代码

解析

如今咱们已经获取了这个文件，咱们须要把它解析成一个模块记录。这有助于浏览器了解模块的不一样部分是什么。

建立模块记录后，将其放置在模块映射中。这意味着不管什么时候从如今开始请求它，加载器均可以从该地图中提取它。

解析中有一个细节看似微不足道，但实际上却有很大的影响。全部模块都被解析，就好像它们"use strict"在顶部同样

实例化

实例结合了代码和状态。该状态存在于内存中，所以实例化步骤就是将事物链接到内存中。

首先，JS引擎建立一个模块环境记录。这管理模块记录的变量。而后它在内存中找到全部导出的框。模块环境记录将跟踪内存中的哪一个框与每一个导出相关联。

仅供学习参考

参考

• es-modules-a-cartoon-deep-dive/