Δυναμική Εισαγωγή ES Modules στο JavaScript
Τα ES modules μπορούν να εισαχθούν δυναμικά. Αυτή η δυνατότητα είναι μερικές φορές χρήσιμη. Ας δούμε πώς γίνεται. Ας υποθέσουμε ότι έχουμε το ακόλουθο module:
export function func1() {
return '1'
}
export function func2() {
return '2'
}
export default function() {
return 'text';
};
Ας υποθέσουμε ότι θέλουμε να εισάγουμε αυτό το module όχι αμέσως, αλλά με βάση κάποιο συμβάν, για παράδειγμα, κάνοντας κλικ σε ένα κουμπί:
btn.addEventListener('click', function() {
});
Ας εισάγουμε το module χρησιμοποιώντας την εντολή
import:
btn.addEventListener('click', function() {
import('./test.js');
});
Η εντολή import επιστρέφει
μια Promise:
btn.addEventListener('click', function() {
import('./test.js').then(mod => {
});
});
Στη μεταβλητή του callback θα πάει ένα αντικείμενο με τις εξαγόμενες συναρτήσεις:
btn.addEventListener('click', function() {
import('./test.js').then(mod => {
let res1 = mod.func1();
let res2 = mod.func2();
console.log(res1, res2);
});
});
Αυτό που εξάγεται ως default,
θα βρίσκεται στο κλειδί default:
btn.addEventListener('click', function() {
import('./test.js').then(mod => {
let dfn = mod.default;
console.log(dfn);
});
});
Μπορείτε να κάνετε αποδόμηση (destructuring) κατά την εισαγωγή:
btn.addEventListener('click', function() {
import('./test.js').then(({func1, func2}) => {
let res1 = func1();
let res2 = func2();
console.log(res1, res2);
});
});
Δημιουργήστε ένα module που εξάγει έναν πίνακα
με τα ονόματα των ημερών της εβδομάδας. Πατώντας σε ένα κουμπί
εισάγετε αυτό το module και εμφανίστε
τις ημέρες της εβδομάδας ως μια λίστα ul.
