Dynamisch importeren van ES modules in JavaScript

ES modules kunnen dynamisch worden geïmporteerd. Deze functionaliteit kan soms nuttig zijn. Laten we eens kijken hoe het wordt gedaan. Stel dat we de volgende module hebben:

export function func1() {
	return '1'
}
export function func2() {
	return '2'
}
export default function() {
	return 'text';
};

Stel dat we deze module niet meteen willen importeren, maar bij een bepaalde gebeurtenis, bijvoorbeeld bij een klik op een knop:

btn.addEventListener('click', function() {
	
});

Laten we de module importeren met de opdracht import:

btn.addEventListener('click', function() {
	import('./test.js');
});

De opdracht import geeft een promise terug als resultaat:

btn.addEventListener('click', function() {
	import('./test.js').then(mod => {
		
	});
});

In de variabele van de callback komt een object met de geëxporteerde functies:

btn.addEventListener('click', function() {
	import('./test.js').then(mod => {
		let res1 = mod.func1();
		let res2 = mod.func2();
		
		console.log(res1, res2);
	});
});

Wat standaard wordt geëxporteerd, zal in de sleutel default staan:

btn.addEventListener('click', function() {
	import('./test.js').then(mod => {
		let dfn = mod.default;
		console.log(dfn);
	});
});

Destructurering kan worden uitgevoerd bij het importeren:

btn.addEventListener('click', function() {
	import('./test.js').then(({func1, func2}) => {
		let res1 = func1();
		let res2 = func2();
		
		console.log(res1, res2);
	});
});

Maak een module die een array exporteert met namen van dagen van de week. Druk op een knop importeer deze module en geef de dagen van de week weer als een lijst ul.