Artikel yang menerangkan modulariti dalam es6 secara terperinci

CommonJs mempunyai banyak ciri yang sangat baik, mari kita semak secara ringkasnya di bawah:

• Kod modul hanya berjalan selepas dimuatkan;

• hanya boleh dimuatkan sekali;

• Modul boleh mentakrifkan antara muka awam, dan modul lain boleh memerhati dan berinteraksi berdasarkan antara muka awam ini;

• 天下 CommonJs yang pahit untuk masa yang lama矣

• adalah unik kerana ia boleh dimuatkan secara asli melalui penyemak imbas atau dengan pemuat pihak ketiga dan alat binaan.

Pelayar yang menyokong modul

boleh memuatkan keseluruhan graf pergantungan daripada modul peringkat atas secara tidak segerak. Penyemak imbas akan menghuraikan modul kemasukan, menentukan kebergantungan, dan menghantar permintaan untuk modul bergantung. Selepas fail ini dikembalikan melalui rangkaian, penyemak imbas akan menyelesaikan kebergantungan mereka, dan jika kebergantungan sekunder ini belum dimuatkan, lebih banyak permintaan akan dihantar. Proses pemuatan rekursif tak segerak ini akan diteruskan sehingga keseluruhan graf pergantungan aplikasi telah diselesaikan. Selepas graf pergantungan dihuraikan, program rujukan boleh memuatkan modul secara rasmi.

---

bukan sahaja meminjam banyak ciri cemerlang Es Module dan

, tetapi juga menambah beberapa gelagat baharu:

Es module

lalai kepada mod ketat Dilaksanakan di bawah;

Es ModuleCommonJsAMD

tidak berkongsi ruang nama global; ialah

(Skrip biasa ialah
• );

  Es Module

• pengisytiharan dalam modul tidak ditambahkan pada objek

  ;Es Module

• dimuatkan dan dilaksanakan secara tak segerak; terutamanya terdiri daripada dua Perintah terdiri daripada: Es Module dan this. Perintah undefinedwindow

digunakan untuk menentukan antara muka luaran modul, dan perintah
• digunakan untuk memasukkan fungsi yang disediakan oleh modul lain.

  varwindow

Penggunaan asas eksport

• Es Module

Bentuk asas eksport:

Sudah tentu, anda juga boleh menulisnya dalam bentuk berikut:

---

• 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:

Penggunaan eksport yang salah

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

Pernyataan eksport mesti berada di peringkat teratas modul dan tidak boleh bersarang dalam blok:

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 };

Mesti menyediakan antara muka luaran:

• exportas

Penggunaan asas import

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

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

Penggunaan

export default "foo";

export default { name: 'moment' }

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

export { bar, foo as default };

Selepas arahan mentakrifkan antara muka luaran modul, fail js lain boleh memuatkan keseluruhan modul melalui perintah

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.

Perintah menerima pendakap kerinting, yang menentukan nama pembolehubah untuk diimport daripada modul lain dan nama pembolehubah mestilah sama dengan nama antara muka luaran modul yang diimport.

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

Pembolehubah yang diimport tidak boleh ditetapkan semula kerana ia adalah antara muka baca sahaja Jika ia objek, sifat objek boleh ditetapkan semula. Modul yang dieksport boleh mengubah suai nilainya dan pembolehubah yang diimport juga akan berubah dengan sewajarnya.

• export

// 1只是一个值,不是一个接口
export 1

// moment只是一个值为1的变量
const moment = 1
export moment

// function和class的输出，也必须遵守这样的写法
function foo(x, y) {
    return x+y
}
export foo

Seperti 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:

• exportimport

import dinamik

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

• Penggunaan standard 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.
• Kata kunci
boleh mengimport modul secara dinamik seperti fungsi panggilan. Dipanggil dengan cara ini,

akan dikembalikan.

• Assignment to constant variableGunakan tahap tertinggi menanti
• import
  • 在经典脚本中使用 await 必须在带有 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';
  }

  在浏览器中使用 Es Module

  ---

  • 在浏览器上,你可以通过将 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 和 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: 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

  • Rekod persekitaran modul ialah rekod persekitaran deklaratif yang digunakan untuk mewakili skop Luaran daripada modul ECMAScript. Selain pengikatan boleh ubah dan tidak berubah biasa, rekod persekitaran modul juga menyediakan pengikatan 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.

  Proses penghuraian Modul Es

  ---

  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.

  

  • Modul terus diisytiharkan melalui pernyataan import, dan terdapat pengecam pengisytiharan modul (import) dalam ModuleSpecifier pernyataan pengisytiharan, yang Beritahu loader cara mencari alamat modul seterusnya.

  

  • Setiap nombor pengenalan modul sepadan dengan 模块记录(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.

  Rekod ImportEntry

  • A 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; >

  Untuk butiran, sila rujuk rajah di bawah:
  Jadual berikut merekodkan contoh medan
  • yang diimport menggunakan :
  • import

    Rekod ExportEntry

    • A ExportEntry 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

    dan tidak menjalankan kod JavaScript Ia hanya mengenali kata kunci
    dan
    • , jadi 静态分析 tidak boleh. digunakan dalam skop bukan global , kecuali import dinamik. exportimportBagaimana jika berbilang fail bergantung pada satu fail serentak? import
    • Gunakan
    untuk menjejak dan cache global
    • untuk memastikan modul hanya loader sekali, dan akan ada Peta Modul bebas dalam setiap skop global. Module MapMOdule Recordfetch
    Peta MODUL ialah objek pemetaan kunci/nilai yang terdiri daripada rekod URL dan rentetan. Rekod URL ialah URL permintaan untuk mendapatkan modul, rentetan yang menunjukkan jenis modul (mis. "javascript"). Nilai peta modul ialah sama ada skrip modul, null (digunakan untuk menunjukkan pengambilan yang gagal) atau nilai pemegang tempat "mengambil".

    

    fasa memautkan

    selepas semua

    dihuraikan Selepas bahawa, enjin JS perlu memautkan semua modul. Enjin JS mengambil
    fail kemasukan sebagai titik permulaan, memautkan modul secara rekursif dalam susunan mendalam-dahulu dan mencipta
    • untuk setiap Module Record untuk mengurus pembolehubah dalam Module Record. Terdapat Module Record dalam Module Environment RecordModule Record

    

    , yang digunakan untuk menyimpan pembolehubah yang dieksport oleh
    • , seperti yang ditunjukkan dalam rajah di atas. Modul 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
    untuk mengimport
    • dan lokasi memori yang ditunjuk oleh pembolehubah 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.jsexport

    Perlu diambil perhatian bahawa kami memanggil apa yang mengeksport modul induk, dan apa yang

    memperkenalkan submodul ,Modul induk boleh mengubah suai pembolehubah dan mempunyai ,membaca dan menulis kebenaran, manakala submodul hanya mempunyai ,membaca kebenaran.
    • exportimport
    Fasa penilaian penilaian

    Selepas 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.

    • Bagaimana modul Es menyelesaikan rujukan pekeliling
    Terdapat 5 negeri di

    ---

    , masing-masing
    ,
    • ,

      , 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!