Review

지난 기사에서 CommonJs에 대해 이야기했습니다. 아직 읽지 않았다면 이 기사가 있는 컬럼을 찾아 학습할 수 있습니다. CommonJs,如果还没有看,可以查找本文章所在的专栏进行学习。
CommonJs 有很多优秀的特性,下面我们再简单的回顾一下:

模块代码只在加载后运行;
模块只能加载一次;
模块可以请求加载其他模块;
支持循环依赖;
模块可以定义公共接口,其他模块可以基于这个公共接口观察和交互;

天下苦 CommonJs 久矣

Es Module 的独特之处在于,既可以通过浏览器原生加载,也可以与第三方加载器和构建工具一起加载。
支持 Es module 模块的浏览器可以从顶级模块加载整个依赖图,且是异步完成。浏览器会解析入口模块,确定依赖,并发送对依赖模块的请求。这些文件通过网络返回后,浏览器就会解析它们的依赖,,如果这些二级依赖还没有加载,则会发送更多请求。
这个异步递归加载过程会持续到整个应用程序的依赖图都解析完成。解析完成依赖图,引用程序就可以正式加载模块了。
Es Module 不仅借用了 CommonJs 和 AMD 的很多优秀特性,还增加了一些新行为:

Es Module 默认在严格模式下执行;
Es Module 不共享全局命名空;
Es Module 顶级的 this 的值是 undefined(常规脚本是window);
模块中的 var 声明不会添加到 window 对象;
Es Module 是异步加载和执行的;

export 和 import

模块功能主要由两个命令构成: exports 和 import。
export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

export的基本使用

导出的基本形式:

export const nickname = "moment";
export const address = "广州";
export const age = 18;

로그인 후 복사

当然了,你也可以写成以下的形式:

const nickname = "moment";
const address = "广州";
const age = 18;

export { nickname, address, age };

로그인 후 복사

对外导出一个对象和函数

export function foo(x, y) {
  return x + y;
}

export const obj = {
  nickname: "moment",
  address: "广州",
  age: 18,
};

// 也可以写成这样的方式
function foo(x, y) {
  return x + y;
}

const obj = {
  nickname: "moment",
  address: "广州",
  age: 18,
};

export { foo, obj };

로그인 후 복사

通常情况下，export输出的变量就是本来的名字，但是可以使用as关键字重命名。

const address = "广州";
const age = 18;

export { nickname as name, address as where, age as old };

로그인 후 복사

默认导出,值得注意的是,一个模块只能有一个默认导出:

export default "foo";

export default { name: 'moment' }

export default function foo(x,y) {
  return x+y
}

export { bar, foo as default };

로그인 후 복사

export 的错误使用

导出语句必须在模块顶级,不能嵌套在某个块中:

if(true){
export {...};
}

로그인 후 복사

export 必须提供对外的接口:

// 1只是一个值,不是一个接口export 1// moment只是一个值为1的变量const moment = 1export moment// function和class的输出，也必须遵守这样的写法function foo(x, y) {    return x+y
}export foo复制代码

로그인 후 복사

import的基本使用

使用 export 命令定义了模块的对外接口以后,其他js文件就可以通过 import 命令加载整个模块

import {foo,age,nickname} from '模块标识符'

로그인 후 복사

模块标识符可以是当前模块的相对路径,也可以是绝对路径,也可以是纯字符串,但不能是动态计算的结果,例如凭借的字符串。
import

CommonJs

모듈 코드는 로딩 후에만 실행됩니다 ;
🎜🎜 모듈은 한 번만 로드될 수 있습니다. 🎜🎜🎜🎜 모듈은 다른 모듈을 로드하도록 요청할 수 있습니다. 🎜🎜🎜🎜 순환 종속성을 지원합니다. 🎜🎜🎜🎜 모듈은 이를 기반으로 관찰하고 상호 작용할 수 있습니다. 공용 인터페이스 ;🎜🎜🎜
Tianxiaku CommonJs 久矣🎜🎜🎜Es 모듈은 브라우저를 통해 기본적으로 로드되거나 Third-Fi를 통해 로드될 수 있다는 점에서 고유합니다. 파티 로더는 빌드 도구와 함께 로드됩니다. 🎜🎜Es 모듈 모듈을 지원하는 브라우저는 최상위 모듈에서 전체 종속성 그래프를 비동기적으로 로드할 수 있습니다. 브라우저는 항목 모듈을 구문 분석하고, 종속성을 결정하고, 종속 모듈에 대한 요청을 보냅니다. 이러한 파일이 네트워크를 통해 반환된 후 브라우저는 해당 종속성을 해결하고 이러한 보조 종속성이 로드되지 않은 경우 추가 요청이 전송됩니다. 🎜🎜이 비동기 재귀 로딩 프로세스는 전체 애플리케이션의 종속성 그래프가 해결될 때까지 계속됩니다. 종속성 그래프가 구문 분석된 후 참조 프로그램은 공식적으로 모듈을 로드할 수 있습니다. 🎜🎜Es 모듈은 CommonJs 및 AMD에서 많은 뛰어난 기능을 빌릴 뿐만 아니라 몇 가지 새로운 동작도 추가합니다. 🎜🎜
- 在浏览器中,引入相同的 nomodule 脚本会被执行多次,而模块只会被执行一次:

    <script></script>    <script></script>

    <script></script>
    <script></script>
    <script></script>

로그인 후 복사

한 기사로 es6 모듈화를 완전히 이해하세요.

模块的默认延迟

默认情况下,nomodule 脚本会阻塞 HTML 解析。你可以通过添加 defer 属性来解决此问题,该属性是等到 HTML 解析完成之后才执行。

한 기사로 es6 모듈화를 완전히 이해하세요.

defer 및 async는 선택적 속성이며 nomodule 스크립트에서 defer code 아래에서 둘 중 하나만 선택할 수 있습니다. >는 <code>HTML이 구문 분석될 때까지 현재 스크립트를 구문 분석하지 않으며, async는 HTML를 차단하지 않고 HTML와 병렬로 구문 분석합니다. > 코드> 구문 분석의 경우 모듈 스크립트는 async 속성을 지정할 수 있지만 기본적으로 모듈이 지연되므로 defer에는 유효하지 않습니다. defer 和 async 是一个可选属性,他们只可以选择其中一个,在 nomodule 脚本下,defer 等到 HTML 解析完才会解析当前脚本,而 async 会和 HTML 并行解析,不会阻塞 HTML 的解析,模块脚本可以指定 async 属性,但对于 defer 无效,因为模块默认就是延迟的。
对于模块脚本,如果存在 async 属性,模块脚本及其所有依赖项将于解析并行获取,并且模块脚本将在它可用时进行立即执行。

Es Module 和 Commonjs 的区别

讨论 Es Module 模块之前,必须先了解 Es Module 与 Commonjs 完全不同,它们有三个完全不同:

CommonJS 模块输出的是一个值的拷贝，Es Module 输出的是值的引用;
CommonJS 模块是运行时加载，Es Module 是编译时输出接口。
CommonJS 模块的 require() 是同步加载模块，ES6 模块的import命令是异步加载，有一个独立的模块依赖的解析阶段。

第二个差异是因为 CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成。而 Es Module 不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。
Commonjs 输出的是值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。具体可以看上一篇写的文章。
Es Module 的运行机制与 CommonJS 不一样。JS引擎 对脚本静态分析的时候，遇到模块加载命令import，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。换句话说，import就是一个连接管道，原始值变了，import 加载的值也会跟着变。因此，Es Module 是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。

Es Module 工作原理的相关概念

在学习工作原理之前,我们不妨来认识一下相关的概念。

Module Record

模块记录(Module Record) 封装了关于单个模块(当前模块)的导入和导出的结构信息。此信息用于链接连接模块集的导入和导出。一个模块记录包括四个字段，它们只在执行模块时使用。其中这四个字段分别是:

Realm: 创建当前模块的作用域;
Environment:模块的顶层绑定的环境记录,该字段在模块被链接时设置;
Namespace:模块命名空间对象是模块命名空间外来对象，它提供对模块导出绑定的基于运行时属性的访问。模块命名空间对象没有构造函数;
HostDefined:字段保留,以按 host environments 使用，需要将附加信息与模块关联。

Module Environment Record

模块环境记录是一种声明性环境记录，用于表示ECMAScript模块的外部作用域。除了普通的可变和不可变绑定之外，模块环境记录还提供了不可变的 import

async

Es 모듈과 Commonjs의 차이점

Es 모듈 모듈을 논의하기 전에 먼저 Es를 이해해야 합니다. 모듈 Commonjs와 완전히 다르며 세 가지 완전히 다른 차이점이 있습니다. 🎜🎜
🎜CommonJS 모듈은 Es 값의 복사본을 출력합니다. 모듈 출력은 값에 대한 참조입니다. 🎜🎜CommonJS 모듈은 런타임에 로드되고 Es 모듈은 컴파일 타임 출력 인터페이스입니다. 🎜🎜CommonJS 모듈의 require()는 모듈을 동기적으로 로드하는 반면, ES6 모듈의 import 명령은 비동기적으로 로드하며 독립적인 모듈 종속성 구문 분석 단계를 갖습니다. 🎜
🎜🎜두 번째 차이점은 CommonJS가 스크립트가 생성된 후에만 로드되는 객체(예: module.exports 속성)를 로드하기 때문입니다. . 그리고 Es 모듈은 객체가 아닙니다. 외부 인터페이스는 코드의 정적 분석 단계에서 생성되는 정적 정의일 뿐입니다. 🎜🎜Commonjs는 값의 복사본을 출력합니다. 즉, 값이 출력되면 모듈 내의 변경 사항이 값에 영향을 미치지 않습니다. 자세한 내용은 이전 글을 참고해주세요. 🎜🎜Es 모듈의 작동 메커니즘은 CommonJS의 작동 메커니즘과 다릅니다. JS 엔진이 스크립트를 정적으로 분석할 때 모듈 로딩 명령 import가 발생하면 읽기 전용 참조를 생성합니다. 스크립트가 실제로 실행되면 이 읽기 전용 참조를 기반으로 로드된 모듈에서 값이 검색됩니다. 즉, import는 연결 파이프입니다. 원래 값이 변경되면 import에 의해 로드된 값도 그에 따라 변경됩니다. 따라서 Es 모듈은 동적 참조이며 값을 캐시하지 않습니다. 모듈의 변수는 해당 변수가 위치한 모듈에 바인딩됩니다. 🎜🎜
Es 모듈 작동 원리 관련 개념
🎜🎜작동 원리를 배우기 전에 관련 개념을 이해하는 것이 좋습니다. 🎜🎜
모듈 기록
🎜🎜모듈 기록(모듈 기록)은 단일 모듈(현재 모듈) 정보의 가져오기 및 내보내기 구조를 캡슐화합니다. . 이 정보는 연결 모듈 세트의 가져오기 및 내보내기를 연결하는 데 사용됩니다. 모듈 레코드는 모듈을 실행할 때만 사용되는 4개의 필드로 구성됩니다. 네 가지 필드는 다음과 같습니다. 🎜🎜
🎜Realm: 현재 모듈의 범위를 생성합니다. 🎜🎜Environment: 모듈의 최상위 바인딩 환경 레코드입니다. 이 필드는 모듈이 연결될 때 설정됩니다. 🎜🎜네임스페이스: 모듈 네임스페이스 개체는 모듈의 내보내기 바인딩에 대한 런타임 속성 기반 액세스를 제공하는 모듈 네임스페이스 외부 개체입니다. 모듈 네임스페이스 객체에는 생성자가 없습니다. 🎜🎜HostDefined: 필드는 호스트 환경에서 사용하도록 예약되어 있으며 모듈과 연결하려면 추가 정보가 필요합니다. 🎜

모듈 환경 레코드
🎜🎜모듈 환경 레코드는 ECMAScript 모듈의 외부 범위를 나타내는 데 사용되는 선언적 환경 레코드입니다. 일반적인 변경 가능 및 불변 바인딩 외에도 모듈 환경 레코드는 다른 환경 레코드 간접 액세스에 존재하는 대상에 대한 바인딩을 제공하는 변경 불가능한 import 바인딩도 제공합니다. 🎜🎜🎜🎜불변 바인딩은 현재 모듈이 다른 모듈을 도입하고, 도입된 변수를 수정할 수 없다는 것을 의미합니다. 이는 모듈의 고유한 불변 바인딩입니다. 🎜

Es 모듈 구문 분석 프로세스

시작하기 전에 먼저 전체 프로세스가 어떤 것인지 대략적으로 살펴보겠습니다.

1단계: 구성(구성 code >), 주소에 따라 js 파일을 검색하고 인터넷을 통해 다운로드한 후 모듈 파일을 모듈 레코드로 구문 분석합니다. Construction),根据地址查找 js 文件,通过网络下载,并且解析模块文件为 Module Record;
阶段二:实例化(Instantiation),对模块进行实例化,并且分配内存空间,解析模块的导入和导出语句,把模块指向对应的内存地址;
阶段三:运行(Evaluation),运行代码,计算值,并且将值填充到内存地址中;

Construction 构建阶段

loader 负责对模块进行寻址及下载。首先我们修改一个入口文件,这在 HTML 中通常是一个 <script type="module"></script> 的标签来表示一个模块文件。

한 기사로 es6 모듈화를 완전히 이해하세요.

模块继续通过 import语句声明,在 import声明语句中有一个模块声明标识符(ModuleSpecifier),这告诉 loader 怎么查找下一个模块的地址。

한 기사로 es6 모듈화를 완전히 이해하세요.

每一个模块标识号对应一个 模块记录(Module Record),而每一个 模块记录 包含了 JavaScript代码、执行上下文、ImportEntries、LocalExportEntries、IndirectExportEntries、StarExportEntries。其中 ImportEntries 值是一个 ImportEntry Records 类型,而 LocalExportEntries、IndirectExportEntries、StarExportEntries 是一个 ExportEntry Records 类型。

ImportEntry Records

一个 ImportEntry Records 包含三个字段 ModuleRequest、ImportName、LocalName;

ModuleRequest: 一个模块标识符(ModuleSpecifier);
ImportName: 由 ModuleRequest 模块标识符的模块导出所需绑定的名称。值 namespace-object 表示导入请求是针对目标模块的命名空间对象的;
LocalName: 用于从导入模块中从当前模块中访问导入值的变量;

详情可参考下图:
下面这张表记录了使用 import 导入的 ImportEntry Records

인스턴스화

3단계: 실행(

평가), 코드를 실행하고 값을 계산하여 메모리 주소에 값을 입력합니다. <thead>
<h2 data-id="heading-16">구성 구성 단계</h2>
<tr class="firstRow">
<th>
<code> 로더

는 모듈 주소 지정 및 다운로드를 로드하는 역할을 담당합니다. 먼저 HTML에서 일반적으로 모듈 파일을 나타내는 <script type="module"></script> 태그인 항목 파일을 수정합니다. 각 모듈 식별 번호는 모듈 레코드에 해당하고 각 모듈 레코드에는 JavaScript 코드, 실행 컨텍스트가 포함되어 있습니다. , ImportEntries, LocalExportEntries, IndirectExportEntries, StarExportEntries. ImportEntries 값은 ImportEntry Records 유형이고 LocalExportEntries, IndirectExportEntries, StarExportEntriesExportEntry Records 유형입니다.

ImportEntry Records

LocalName: 가져온 모듈에서 가져온 값에 액세스하는 데 사용되는 변수 ol>자세한 내용은 아래 사진을 참고해주세요: 한 기사로 es6 모듈화를 완전히 이해하세요.

다음 표에는 import를 사용하여 가져온 ImportEntry Records 필드의 인스턴스가 기록되어 있습니다. Import 문 From 모듈 식별자(모듈 요청)ImportName(ImportName)LocalName(LocalName)import "react"에서 반응;"react""default""React"


A `ImportEntry Records`에는 `ModuleRequest`, `ImportName, <code>LocalName`;	ModuleRequest: 모듈 식별자(`ModuleSpecifier`);	ImportName: `ModuleRequest`에 의한 모듈 식별자 모듈 필요한 바인딩의 이름을 내보냅니다. `namespace-object` 값은 가져오기 요청이 대상 모듈의 네임스페이스 개체에 대한 것임을 나타냅니다.

🎜가져오기 * as Moment from "react";🎜🎜"react"🎜🎜namespace-obj🎜🎜"Moment"🎜🎜🎜🎜import {useEffect} from "react";🎜🎜"react"🎜🎜"useEffect"🎜🎜 "useEffect" 🎜🎜🎜🎜"react"에서 {useEffect를 효과로 } 가져오기;🎜🎜"react"🎜🎜"useEffect"🎜🎜"효과"🎜🎜🎜🎜

ExportEntry Records

ExportEntry Records에는 ExportName, ModuleRequest, ImportName, LocalName 4개의 필드가 포함되어 있습니다. <code>ImportEntry Records와 다른 에는 추가 ExportName이 있습니다.

ExportEntry Records

ExportName

ModuleRequest

ImportName

LocalName

ImportEntry Records

ExportName

ExportName: 此模块用于导出时绑定的名称。

下面这张表记录了使用 export 导出的 ExportEntry RecordsExportName: 이 모듈은 내보낼 때 이름을 바인딩하는 데 사용됩니다.

다음 표에는 export를 사용하여 내보낸 ExportEntry Records 필드의 예가 나와 있습니다.

Export 문	내보내기 이름	모듈 식별자	가져오기 이름
export var v;	"v"	null	null
기본 함수 f() 내보내기 {}	"default"	null	null
기본 함수 내보내기() {}	"default"	null	null"
기본값 42 내보내기;	"default"	null	null"
export {x};	"x"	null	null
{v를 x로 내보내기};	"x"	null	null
"mod"에서 {x} 내보내기;	"x"	"mod "	"x"
export {v as x} from "mod";	"x"	"mod"	"v"
export * from "mod";	null	"mod"	all-but-default
"mod"에서 ns로 * 내보내기;	"ns	"mod"	all

주제로 돌아가기
현재 모듈 레코드를 구문 분석한 후에만 현재 모듈이 어떤 하위 모듈에 의존하는지 알 수 있으며 그런 다음 하위 해결이 필요합니다. 모듈, 하위 모듈을 얻은 다음 하위 모듈을 구문 분석하고 이 해결 과정을 계속해서 가져오기 -> 결과는 아래 그림과 같습니다. https://img.php.cn /upload/article/000/000/020/199ce9bded58feb1ab4aa3e006ef5934-7.png" alt="한 기사로 es6 모듈화를 완전히 이해하세요." loading="lazy"/>Module Record 之后,才能知道当前模块依赖的是那些子模块,然后你需要 resolve 子模块,获取子模块,再解析子模块,不断的循环这个流程 resolving -> fetching -> parsing,结果如下图所示:

한 기사로 es6 모듈화를 완전히 이해하세요.

这个过程也称为 静态分析,不会运行JavaScript代码,只会识别 export 和 import 关键字,所以说不能在非全局作用域下使用 import,动态导入除外。
如果多个文件同时依赖一个文件呢,这会不会引起死循环,答案是不会的。
loader 使用 Module Map 对全局的 MOdule Record 进行追踪、缓存这样就可以保证模块只被 fetch 一次,每个全局作用域中会有一个独立的 Module Map。

MOdule Map 是由一个 URL 记录和一个字符串组成的key/value的映射对象。URL记录是获取模块的请求URL，字符串指示模块的类型(例如。“javascript”)。模块映射的值要么是模块脚本，null(用于表示失败的获取)，要么是占位符值“fetching(获取中)”。

한 기사로 es6 모듈화를 완전히 이해하세요.

linking 链接阶段

在所有 Module Record 被解析完后，接下来 JS 引擎需要把所有模块进行链接。JS 引擎以入口文件的 Module Record 作为起点，以深度优先的顺序去递归链接模块，为每个 Module Record 创建一个 Module Environment Record，用于管理 Module Record 中的变量。

한 기사로 es6 모듈화를 완전히 이해하세요.

Module Environment Record 中有一个 Binding,这个是用来存放 Module Record 导出的变量,如上图所示,在该模块 main.js 处导出了一个 count 的变量,在 Module Environment Record 中的 Binding 就会有一个 count,在这个时候,就相当于 V8 的编译阶段,创建一个模块实例对象,添加相对应的属性和方法,此时值为 undefined 或者 null,为其分配内存空间。
而在子模块 count.js 中使用了 import 关键字对 main.js 进行导入,而 count.js 的 import 和 main.js 的 export

정적 분석

export

import

여러 파일이 동시에 하나의 파일에 의존하는 경우 무한 루프가 발생합니까? 대답은 '아니요'입니다. 한 기사로 es6 모듈화를 완전히 이해하세요.

loader는 모듈 맵을 사용하여 전역 MOdule 레코드를 추적하고 캐시하여 모듈이 가져오기 >만 수행되도록 합니다. 일단 각 전역 범위에 독립적인 모듈 맵이 있게 됩니다. 🎜🎜

🎜MOdule Map은 URL 레코드와 문자열로 구성된 키/값 매핑 개체입니다. URL 레코드는 모듈을 가져오기 위한 요청 URL이며, 모듈 유형을 나타내는 문자열(예: "javascript")입니다. 모듈 맵의 값은 모듈 스크립트, null(가져오기 실패를 나타내는 데 사용됨) 또는 자리 표시자 값 "가져오기"입니다. 🎜

🎜

링크 연결 단계

모듈 레코드

모듈에 대한 <code>모듈 환경 레코드

모듈 레코드

모듈 환경 레코드

모듈 레코드

바인딩

main.js

모듈 환경 레코드

바인딩

count

V8

입니다. 정의되지 않음

null

import

count.js

main.js

count.js는

import

main.js

export

需要注意的是,我们称 export 导出的为父模块,import 引入的为子模块,父模块可以对变量进行修改,具有读写权限,而子模块只有读权限。

Evaluation 求值阶段

在模块彼此链接完之后,执行对应模块文件中顶层作用域的代码，确定链接阶段中定义变量的值，放入内存中。

Es module 是如何解决循环引用的

在 Es Module 中有5种状态，分别为 unlinked、linking、linked、evaluating和 evaluated，用循环模块记录(Cyclic Module Records)的 Status 字段来表示,正是通过这个字段来判断模块是否被执行过,每个模块只执行一次。这也是为什么会使用 Module Map 来进行全局缓存 Module Record 的原因了,如果一个模块的状态为 evaluated,那么下次执行则会自动跳过,从而包装一个模块只会执行一次。 Es Module 采用 深度优先 的方法对模块图进行遍历,每个模块只执行一次,这也就避免了死循环的情况了。

深度优先搜索算法（英语：Depth-First-Search，DFS）是一种用于遍历或搜索树或图的算法。这个算法会尽可能深地搜索树的分支。当节点v的所在边都己被探寻过，搜索将回溯到发现节点v的那条边的起始节点。这一过程一直进行到已发现从源节点可达的所有节点为止。如果还存在未被发现的节点，则选择其中一个作为源节点并重复以上过程，整个进程反复进行直到所有节点都被访问为止。

한 기사로 es6 모듈화를 완전히 이해하세요.

看下面的例子,所有的模块只会运行一次:

// main.js
import { bar } from "./bar.js";
export const main = "main";
console.log("main");

// foo.js
import { main } from "./main.js";
export const foo = "foo";
console.log("foo");

// bar.js
import { foo } from "./foo.js";
export const bar = "bar";
console.log("bar");

로그인 후 복사