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
<script>
, 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>
<script>
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 .
defer
Ia tidak akan dilaksanakan sehingga keseluruhan halaman dipaparkan secara normal dalam ingatan (struktur DOM dijana sepenuhnya dan skrip lain dilaksanakanasync
Sekali 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 <script>
, tetapi atribut type="module"
mesti ditambah. Untuk type="module"
dengan <script>
, 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
<script type="module" src="./foo.js"></script>
, jika halaman web mempunyai berbilang , ia akan dilaksanakan mengikut urutan mengikut susunan muncul pada halaman.
Nota: Atribut async bagi teg
<script>
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,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.
<script type="module"> import utils from "./utils.js"; // other code </script>
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!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas



Dalam ES6, anda boleh menggunakan kaedah reverse() objek tatasusunan untuk mencapai pembalikan tatasusunan Kaedah ini digunakan untuk membalikkan susunan elemen dalam tatasusunan, meletakkan elemen terakhir dahulu dan elemen pertama terakhir .reverse()". Kaedah reverse() akan mengubah suai tatasusunan asal Jika anda tidak mahu mengubah suainya, anda perlu menggunakannya dengan operator pengembangan "..." dan sintaksnya ialah "[...array].reverse() ".

async ialah es7. async dan await ialah penambahan baharu kepada ES7 dan merupakan penyelesaian untuk operasi asynchronous/wait boleh dikatakan sebagai gula sintaktik untuk modul bersama dan fungsi penjana, menyelesaikan kod tak segerak dengan semantik yang lebih jelas. Seperti namanya, async bermaksud "tak segerak".

Langkah-langkah: 1. Tukar dua tatasusunan untuk menetapkan jenis masing-masing, dengan sintaks "newA=new Set(a);newB=new Set(b);" 2. Gunakan has() dan filter() untuk mencari set perbezaan , dengan sintaks " new Set([...newA].filter(x =>!newB.has(x)))", elemen set perbezaan akan dimasukkan dalam koleksi set dan dikembalikan 3. Gunakan Array. daripada untuk menukar set menjadi Jenis tatasusunan, sintaks "Array.from(collection)".

Untuk keserasian pelayar. Sebagai spesifikasi baharu untuk JS, ES6 menambah banyak sintaks dan API baharu Walau bagaimanapun, penyemak imbas moden tidak mempunyai sokongan tinggi untuk ciri baharu ES6, jadi kod ES6 perlu ditukar kepada kod ES5. Dalam alat pembangun web WeChat, babel digunakan secara lalai untuk menukar kod sintaks ES6 pembangun kepada kod ES5 yang disokong dengan baik oleh ketiga-tiga terminal, membantu pembangun menyelesaikan masalah pembangunan yang disebabkan oleh persekitaran yang berbeza hanya dalam projek Hanya konfigurasi dan semak Pilihan "ES6 hingga ES5".

Dalam es5, anda boleh menggunakan fungsi for dan indexOf() untuk mencapai deduplikasi tatasusunan Sintaks "for(i=0;i<array length;i++){a=newArr.indexOf(arr[i]);if(. a== -1){...}}". Dalam es6, anda boleh menggunakan operator spread, Array.from() dan Set untuk mengalih keluar penduaan anda perlu terlebih dahulu menukar tatasusunan menjadi objek Set untuk mengalih keluar pendua, dan kemudian menggunakan fungsi spread atau Array.from() untuk tukar objek Set kembali kepada kumpulan Just.

Dalam es6, zon mati sementara ialah ralat sintaks, yang merujuk kepada arahan let dan const yang menjadikan blok membentuk skop tertutup. Dalam blok kod, sebelum pembolehubah diisytiharkan menggunakan perintah let/const, pembolehubah tidak tersedia dan tergolong dalam "zon mati" pembolehubah sebelum pembolehubah diisytiharkan ini secara sintaksis dipanggil "zon mati sementara". ES6 menetapkan bahawa promosi pembolehubah tidak berlaku dalam zon mati sementara dan pernyataan let dan const, terutamanya untuk mengurangkan ralat masa jalan dan menghalang pembolehubah daripada digunakan sebelum ia diisytiharkan, yang mungkin membawa kepada tingkah laku yang tidak dijangka.

Tidak, memerlukan sintaks modular bagi spesifikasi CommonJS dan sintaks modular bagi spesifikasi es6 ialah import. memerlukan dimuatkan pada masa jalan, dan import dimuatkan pada masa penyusunan; memerlukan boleh ditulis di mana-mana dalam kod, import hanya boleh ditulis di bahagian atas fail dan tidak boleh digunakan dalam penyataan bersyarat atau skop fungsi diperkenalkan sahaja apabila memerlukan dijalankan Oleh itu, prestasi adalah agak rendah Sifat modul yang diperkenalkan semasa penyusunan import mempunyai prestasi yang lebih tinggi.

Peta dipesan. Jenis peta dalam ES6 ialah senarai tersusun yang menyimpan banyak pasangan nilai kunci Nama kunci dan nilai yang sepadan menyokong semua jenis data, kesetaraan nama kunci dinilai dengan memanggil kaedah "Objext.is()". , jadi nombor 5 dan rentetan "5" akan dinilai sebagai dua jenis, dan boleh muncul dalam program sebagai dua kekunci bebas.
