CommonJs mempunyai banyak ciri yang sangat baik, mari kita semak secara ringkasnya di bawah:
Kod modul hanya berjalan selepas dimuatkan;
天下 CommonJs yang pahit untuk masa yang lama矣
bukan sahaja meminjam banyak ciri cemerlang Es Module dan
Es module
Es ModuleCommonJsAMD
Es Module
;Es Module
dimuatkan dan dilaksanakan secara tak segerak; terutamanya terdiri daripada dua Perintah terdiri daripada: Es Module dan this. Perintah undefinedwindow
varwindow
Es Module
exportsEksport objek dan berfungsi secara luaranimport
exportBiasanya, output pembolehubah oleh import ialah nama asalnya, tetapi ia boleh dinamakan semula menggunakan kata kunci Eksport lalai Perlu diingat bahawa modul hanya boleh mempunyai satu eksport lalai:
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 };exportasconst 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 };Pengecam modul boleh menjadi relatif laluan modul semasa, atau ia boleh Ia adalah laluan mutlak, atau ia boleh menjadi rentetan tulen, tetapi ia tidak boleh menjadi hasil pengiraan dinamik, seperti rentetan.
if(true){
export {...};
}export// 1只是一个值,不是一个接口
export 1
// moment只是一个值为1的变量
const moment = 1
export moment
// function和class的输出，也必须遵守这样的写法
function foo(x, y) {
return x+y
}
export fooSeperti yang anda boleh lihat daripada gambar di atas, atribut objek telah ditetapkan semula, manakala pembolehubah melaporkan ralat jenis . Jika modul mengeksport kedua-dua eksport bernama dan eksport lalai, modul tersebut boleh diperolehi pada masa yang sama dalam penyata . Anda boleh mendapatkan pengecam khusus dengan menyenaraikannya dalam urutan, atau anda boleh menggunakan
untuk mendapatkannya:exportimportimport {foo,age,nickname} form '模块标识符'import Modul yang diimport adalah statik, yang akan menyebabkan semua modul yang diimport akan disusun apabila dimuatkan (kompilasi atas permintaan tidak dapat dicapai, yang akan mengurangkan kelajuan pemuatan halaman utama). Dalam sesetengah senario, anda mungkin mahu mengimport modul berdasarkan syarat atau atas permintaan Dalam kes ini, anda boleh menggunakan import dinamik dan bukannya import statik. 
Assignment to constant variableGunakan tahap tertinggi menantiimportawait 必须在带有 async 的异步函数中使用,否则会报错:const p = new Promise((resolve, reject) => {
resolve(111);
});
// SyntaxError: await is only valid in async functions and the top level bodies of modules
const result = await p;
console.log(result);Top-level await:const p = new Promise((resolve, reject) => {
resolve(777);
});
const result = await p;
console.log(result); // 777正常输出import 的错误使用
import是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构。// 错误
import { 'b' + 'ar' } from './foo.js';
// 错误
let module = './foo.js';
import { bar } from module;
// 错误
if (x === 1) {
import { bar } from './foo.js';
} else {
import { foo } from './foo.js';
}在浏览器上,你可以通过将 type 属性设置为 module 用来告知浏览器将 script 标签视为模块。
<script type="module" src="./main.mjs"></script> <script type="module"></script>
defer 的方式延迟你的 nomodule 脚本: <script type="module">
console.log("模块情况下的");
</script>
<script src="./main.js" type="module" defer></script>
<script>
console.log("正常 script标签");
</script>
nomodule 脚本会被执行多次,而模块只会被执行一次: <script src="./foo.js"></script>
<script src="./foo.js"></script>
<script type="module" src="./main.js"></script>
<script type="module" src="./main.js"></script>
<script type="module" src="./main.js"></script>
默认情况下,nomodule 脚本会阻塞 HTML 解析。你可以通过添加 defer 属性来解决此问题,该属性是等到 HTML 解析完成之后才执行。
defer 和 async 是一个可选属性,他们只可以选择其中一个,在 nomodule 脚本下,defer 等到 HTML 解析完才会解析当前脚本,而 async 会和 HTML 并行解析,不会阻塞 HTML 的解析,模块脚本可以指定 async 属性,但对于 defer 无效,因为模块默认就是延迟的。async 属性,模块脚本及其所有依赖项将于解析并行获取,并且模块脚本将在它可用时进行立即执行。讨论 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 是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。
在学习工作原理之前,我们不妨来认识一下相关的概念。
Module Record
模块记录(Module Record) 封装了关于单个模块(当前模块)的导入和导出的结构信息。此信息用于链接连接模块集的导入和导出。一个模块记录包括四个字段，它们只在执行模块时使用。其中这四个字段分别是:
Realm: 创建当前模块的作用域;
Environment:模块的顶层绑定的环境记录,该字段在模块被链接时设置;
Namespace: Objek ruang nama modul ialah objek asing ruang nama modul yang menyediakan akses berasaskan harta masa jalan kepada pengikatan eksport modul. Objek ruang nama modul tidak mempunyai pembina;
HostDefined: medan dikhaskan untuk digunakan sebagai host environments dan memerlukan maklumat tambahan untuk dikaitkan dengan modul.
Rekod Persekitaran Modul
import tidak berubah, yang menyediakan akses tidak langsung kepada pengikatan sasaran yang wujud dalam rekod persekitaran lain. Ikatan tidak berubah bermakna modul semasa memperkenalkan modul lain, dan pembolehubah yang diperkenalkan tidak boleh diubah suai Ini ialah pengikatan tidak berubah unik bagi modul.
Sebelum kita mula, mari kita mulakan idea umum tentang bagaimana keseluruhan proses itu gambaran keseluruhan. Pemahaman:
Fasa 1: Pembinaan (Construction), cari fail js mengikut alamat, muat turun melalui rangkaian dan huraikan fail modul sebagai Module Record;
Fasa 2: Instalasi (Instantiation), nyatakan modul, peruntukkan ruang memori, huraikan penyataan import dan eksport modul dan arahkan modul ke alamat memori yang sepadan;
Fasa 3: Jalankan (Evaluation), jalankan kod, kira nilai dan isikan nilai ke dalam alamat memori;
Fasa pembinaan pembinaan
loader bertanggungjawab menangani dan memuat turun modul. Mula-mula kita mengubah suai fail masukan, yang biasanya merupakan tag HTML dalam <script type="module"></script> untuk mewakili fail modul. 
import, dan terdapat pengecam pengisytiharan modul (import) dalam ModuleSpecifier pernyataan pengisytiharan, yang Beritahu loader cara mencari alamat modul seterusnya. 
模块记录(Module Record) dan setiap 模块记录 termasuk JavaScript代码, 执行上下文, ImportEntries, LocalExportEntries, IndirectExportEntries, StarExportEntries. Di mana nilai ImportEntries ialah jenis ImportEntry Records dan LocalExportEntries, IndirectExportEntries, StarExportEntries ialah jenis ExportEntry Records. ImportEntry Records mengandungi tiga medan ModuleRequest, ImportName, LocalName;ModuleRequest: pengecam modul (ModuleSpecifier);
ImportName: nama pengikatan yang diperlukan yang dieksport oleh modul dengan pengecam modul ModuleRequest. Nilai namespace-object menunjukkan bahawa permintaan import adalah untuk objek ruang nama modul sasaran; >
: importExportEntry Records mengandungi empat medan ExportName, ModuleRequest, ImportName, LocalName dan ImportEntry Records berbeza Di sana adalah satu lagi ExportName. ExportName: Modul ini digunakan untuk mengikat nama semasa mengeksport.
Jadual berikut merekodkan contoh medan export yang dieksport menggunakan ExportEntry Records:
| 导出声明 | 导出名 | 模块标识符 | 导入名 | 本地名 |
|---|---|---|---|---|
| export var v; | "v" | null | null | "v" |
| export default function f() {} | "default" | null | null | "f" |
| export default function () {} | "default" | null | null | "default" |
| export default 42; | "default" | null | null | "default" |
| export {x}; | "x" | null | null | "x" |
| export {v as x}; | "x" | null | null | "v" |
| export {x} from "mod"; | "x" | "mod" | "x" | null |
| export {v as x} from "mod"; | "x" | "mod" | "v" | null |
| export * from "mod"; | null | "mod" | all-but-default | null |
| export * as ns from "mod"; | "ns | "mod" | all | null |
Kembali ke topik
Hanya selepas menghuraikan semasa Module Record boleh anda tahu submodul yang mana modul semasa bergantung, dan kemudian anda perlu resolve Sub-modul, dapatkan sub-modul, kemudian huraikan sub-modul, teruskan kitaran proses ini menyelesaikan -> menguraikan -> >
Proses ini juga dipanggil
静态分析 tidak boleh. digunakan dalam skop bukan global , kecuali import dinamik. exportimportBagaimana jika berbilang fail bergantung pada satu fail serentak? importloader sekali, dan akan ada Peta Modul bebas dalam setiap skop global. Module MapMOdule Recordfetch
selepas semua
dihuraikan Selepas bahawa, enjin JS perlu memautkan semua modul. Enjin JS mengambilModule Record untuk mengurus pembolehubah dalam Module Record. Terdapat Module Record dalam Module Environment RecordModule Record
Module Environment Record mengeksport Binding pembolehubah, dan Module Record dalam main.js akan mempunyai count Pada masa ini, ia bersamaan dengan fasa kompilasi Module Environment Record, mencipta contoh modul. object. , tambahkan atribut dan kaedah yang sepadan, nilai pada masa ini ialah Binding atau count, dan peruntukkan ruang memori untuknya. V8undefined menggunakan kata kunci null dalam submodul count.js dan import main.js adalah konsisten, sekali gus menghubungkan hubungan antara modul ibu bapa dan anak. Seperti yang ditunjukkan dalam rajah di bawah: count.jsimportmain.jsexportPerlu diambil perhatian bahawa kami memanggil apa yang 
mengeksport modul induk, dan apa yang
exportimportSelepas modul dipautkan antara satu sama lain, laksanakan skop peringkat atas dalam fail modul yang sepadan Kod yang menentukan nilai pembolehubah yang ditakrifkan dalam fasa pautan dan meletakkannya dalam ingatan.
, Es Module dan unlinked diwakili oleh medan linking rekod modul gelung (linked Melalui medan ini kita boleh menentukan sama ada modul telah dilaksanakan). Setiap modul dilaksanakan sekali sahaja. Ini juga sebab mengapa evaluating digunakan untuk caching global evaluated Jika status modul ialah Cyclic Module Records, pelaksanaan seterusnya akan dilangkau secara automatik, oleh itu pembungkusan modul hanya akan dilaksanakan sekali. Status Gunakan kaedah Module Map untuk melintasi graf modul Setiap modul hanya dilaksanakan sekali, yang mengelakkan gelung tak terhingga. Module Record
深度优先搜索算法（英语：Depth-First-Search，DFS）是一种用于遍历或搜索树或图的算法。这个算法会尽可能深地搜索树的分支。当节点v的所在边都己被探寻过，搜索将回溯到发现节点v的那条边的起始节点。这一过程一直进行到已发现从源节点可达的所有节点为止。如果还存在未被发现的节点，则选择其中一个作为源节点并重复以上过程，整个进程反复进行直到所有节点都被访问为止。
// 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");node 运行 main.js ,得出以下结果:
好了,这篇文章到这也就结束了。
原文地址：https://juejin.cn/post/7166046272300777508
【推荐学习：javascript高级教程】
Atas ialah kandungan terperinci Artikel yang menerangkan modulariti dalam es6 secara terperinci. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
