Adakah nilai keluaran oleh modul es6 disalin?

Tidak, modul ES6 mengeluarkan rujukan kepada nilai, manakala modul CommonJS mengeluarkan salinan nilai. Dalam modul ES6, apabila enjin JS menganalisis skrip secara statik dan menemui import arahan pemuatan modul, ia akan menjana rujukan baca sahaja apabila skrip benar-benar dilaksanakan, ia akan pergi ke modul yang dimuatkan berdasarkan baca sahaja ini rujukan. Modul ES6 ialah rujukan dinamik Modul ES6 tidak menyimpan hasil yang sedang dijalankan, tetapi secara dinamik memperoleh nilai daripada modul yang dimuatkan, dan pembolehubah sentiasa terikat pada modul di mana ia berada.

Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 6 , komputer Dell G3.

Pemuatan penyemak imbas

Secara lalai, penyemak imbas memuatkan skrip JavaScript secara serentak, iaitu apabila enjin pemaparan bertemu Ia akan berhenti apabila ia mencapai teg 3f1c4e4b6b16bbbd69b2ee476dc4f83a, tunggu sehingga skrip dilaksanakan, dan kemudian teruskan untuk memaparkan ke bawah.

Jika ia adalah skrip luaran, masa muat turun skrip juga mesti ditambah.

Jika skrip bersaiz besar, ia akan mengambil masa yang lama untuk memuat turun dan melaksanakan, sekali gus menyebabkan penyemak imbas tersumbat, dan pengguna akan merasakan penyemak imbas "terperangkap" tanpa sebarang respons. Ini jelas merupakan pengalaman yang sangat buruk, jadi penyemak imbas membenarkan skrip dimuatkan secara tak segerak Berikut ialah dua sintaks untuk pemuatan tak segerak. Teg

<script src="path/to/myModule.js" defer></script>
<script src="path/to/myModule.js" async></script>

3f1c4e4b6b16bbbd69b2ee476dc4f83a menghidupkan atribut tangguh atau tak segerak dan skrip akan dimuatkan secara tidak segerak. Apabila enjin rendering menemui baris arahan ini, ia akan mula memuat turun skrip luaran, tetapi tidak akan menunggu untuk dimuat turun dan dilaksanakan, tetapi akan terus melaksanakan arahan berikut .

• deferIa tidak akan dilaksanakan sehingga keseluruhan halaman dipaparkan secara normal dalam ingatan (struktur DOM dijana sepenuhnya dan skrip lain dilaksanakan
• asyncSekali dimuat turun Apabila skrip selesai, enjin rendering akan mengganggu rendering dan meneruskan rendering selepas melaksanakan skrip ini.

Dalam satu ayat, defer bermaksud "laksanakan selepas rendering", async bermaksud "laksanakan selepas memuat turun" . Selain itu, jika terdapat berbilang skrip penangguhan, ia akan dimuatkan mengikut susunan yang dipaparkan pada halaman, tetapi berbilang skrip async tidak dapat menjamin urutan pemuatan.

Pelayar memuatkan modul ES6 dan juga menggunakan tag 3f1c4e4b6b16bbbd69b2ee476dc4f83a, tetapi atribut type="module" mesti ditambah. Untuk type="module" dengan 3f1c4e4b6b16bbbd69b2ee476dc4f83a, penyemak imbas akan memuatkan secara tak segerak dan tidak akan menyekat penyemak imbas, iaitu, tunggu sehingga keseluruhan halaman dipaparkan, dan kemudian laksanakan skrip modul , yang bersamaan dengan Selepas membuka

a907279e6cf2b736e22e16a7121cae332cacc6d41bbb37262a98f745aa00fbf0

, jika halaman web mempunyai berbilang f8666432049ee9d811f748637f7d3a4b, ia akan dilaksanakan mengikut urutan mengikut susunan muncul pada halaman.

Nota: Atribut async bagi teg 3f1c4e4b6b16bbbd69b2ee476dc4f83a juga boleh dihidupkan Pada masa ini, selagi pemuatan selesai, enjin pemaparan akan mengganggu pemaparan dan melaksanakannya serta-merta. Selepas pelaksanaan selesai, sambung rendering. Sebaik sahaja atribut async digunakan, f8666432049ee9d811f748637f7d3a4b tidak akan dilaksanakan mengikut susunan ia muncul pada halaman, tetapi akan dilaksanakan sebaik sahaja modul dimuatkan.

Untuk skrip modul luaran (contoh di atas ialah foo.js), terdapat beberapa perkara yang perlu diambil perhatian:

• Kod itu dalam skop modul Jalankan di dalamnya dan bukannya menjalankannya dalam skop global. Pembolehubah peringkat atas di dalam modul tidak kelihatan secara luaran.
• Skrip modul secara automatik menggunakan mod ketat, tidak kira sama ada penggunaan ketat diisytiharkan atau tidak. Dalam modul
• , anda boleh menggunakan perintah import untuk memuatkan modul lain (akhiran .js tidak boleh ditinggalkan dan anda perlu menyediakan URL mutlak atau URL relatif ), atau anda boleh menggunakan perintah eksport untuk mengeluarkan antara muka luaran. Dalam modul
• , kata kunci peringkat atas ini mengembalikan undefined dan bukannya menunjuk ke tetingkap. Dalam erti kata lain, menggunakan kata kunci ini di peringkat teratas modul adalah tidak bermakna.
• Jika modul yang sama dimuatkan beberapa kali, ia hanya akan dilaksanakan sekali .

---

Modul ES6 juga dibenarkan untuk dibenamkan dalam halaman web dan tingkah laku sintaksis adalah sama seperti memuatkan skrip luaran.

3acaf50c6526a47d62726f112635bc51
  import utils from "./utils.js";
  // other code
2cacc6d41bbb37262a98f745aa00fbf0

Perbezaan antara modul ES6 dan modul CommonJS

CommonJS ialah modul pemuatan segerak, ES6 ialah modul pemuatan tak segerak

Modul pemuatan spesifikasi CommonJS adalah segerak, iaitu, hanya apabila pemuatan selesai boleh operasi berikutnya dilakukan. Memandangkan Node.js digunakan terutamanya untuk pengaturcaraan pelayan, fail modul secara amnya sudah wujud pada cakera keras tempatan, jadi ia boleh dimuatkan dengan cepat Tidak perlu mempertimbangkan pemuatan tak segerak, jadi spesifikasi CommonJS lebih sesuai.

但是，如果是浏览器环境，要从服务器端加载模块，这时就必须采用异步模式。

浏览器加载 ES6 模块是异步加载，不会造成堵塞浏览器，即等到整个页面渲染完，再执行模块脚本

---

CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。

CommonJS 模块输出的是值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值

ES6 模块的运行机制与 CommonJS 不一样。JS 引擎对脚本静态分析的时候，遇到模块加载命令import，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。

换句话说，ES6 的import有点像 Unix 系统的“符号连接”，原始值变了，import加载的值也会跟着变。因此，ES6 模块是动态引用，ES6 模块不会缓存运行结果，而是动态地去被加载的模块取值，并且变量总是绑定其所在的模块。

由于 ES6 输入的模块变量，只是一个“符号连接”，所以这个变量是只读的，对它进行重新赋值会报错。上面代码中，main.js从lib.js输入变量obj，可以对obj添加属性，但是重新赋值就会报错。因为变量obj指向的地址是只读的，不能重新赋值，这就好比main.js创造了一个名为obj的const变量。

// lib.js
export let obj = {};
// main.js
import { obj } from './lib';
obj.prop = 123; // OK
obj = {}; // TypeError

此外，export通过接口，输出的是同一个值。不同的脚本加载这个接口，得到的都是同样的实例。

---

CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

因为 CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成。

而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。

【相关推荐：javascript视频教程、编程视频】

Atas ialah kandungan terperinci Adakah nilai keluaran oleh modul es6 disalin?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!