Impor Dinamis dalam JavaScript

Pada awal tahun lalu, diusulkan untuk memperkenalkan impor dinamis ke JavaScript. Jika ada yang tidak tahu, sekarang hanya impor statis yang didukung secara asli di JavaScript, dan ada alasan untuk ini, tetapi ini adalah topik untuk diskusi lain. Proposal diimplementasikan dan dimasukkan dalam daftar pembaruan ECMAScript mendatang. Google Chrome dengan versi 63 sudah mendukung fitur ini. Saya akan memberi tahu Anda sedikit apa itu dan di mana itu bisa berguna.


Impor dinamis digunakan dalam banyak cara yang sama seperti impor statis, tetapi memiliki beberapa perbedaan utama:


Impor dinamis secara sintaksis mirip dengan pemanggilan fungsi: impor ('path / ke / module.js');


Perintah import ('path / to / file.js') mengembalikan Promise, yang akan masuk ke status terpenuhi setelah modul itu sendiri ditarik ke atas dan diinstal secara langsung, serta semua dependensinya. Dan ini artinya kita bisa menulis seperti ini:


import('path/to/module.js') .then(module => { module.loadPageInto(main); }) .catch(err => { main.textContent = err.message; }); 

Atau bahkan seperti ini:


 const module = await import('path/to/module.js'); 

Catatan penting: meskipun impor dinamis adalah sintaksis dan terlihat seperti panggilan ke fungsi impor (), itu bukan fungsi. Itu tidak diwarisi dari Function.prototype, yang berarti tidak dapat dipanggil melalui panggilan atau berlaku.


Ada banyak aplikasi untuk impor dinamis, memerlukan.js telah lama memiliki peluang yang sama dan paket web, jika saya tidak salah juga, jadi banyak dari Anda mungkin telah menggunakan fungsi ini untuk waktu yang lama. Sekarang mungkin untuk melakukan ini secara asli. Tetapi di sisi lain, kemampuan untuk mengimpor secara dinamis, tergantung pada kondisinya, selama runtime juga menyediakan tempat untuk kode yang lebih membingungkan, meskipun saya mengerti bahwa Anda dapat menempel kode yang buruk dengan apa pun, itu bukan alat. Tulis pendapat Anda di komentar, apa pendapat Anda tentang impor dinamis.


Anda dapat membaca lebih lanjut dan lihat di sini:
https://github.com/tc39/proposal-dynamic-import
https://developers.google.com/web/updates/2017/11/dynamic-import
https://www.youtube.com/watch?v=eg8eLH52d4s&t=31s

Source: https://habr.com/ru/post/id455200/


All Articles