Dinamiese import van ES modules in JavaScript

ES modules kan dinamies geïmporteer word. Hierdie funksionaliteit is soms nuttig. Kom ons kyk hoe dit gedoen word. Laat ons die volgende module hê:

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

Kom ons sê ons wil hierdie module nie onmiddellik importeer nie, maar by 'n sekere gebeurtenis, bv. by 'n klik op 'n knoppie:

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

Kom ons importeer die module met die opdrag import:

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

Die import-opdrag gee as sy resultaat 'n belofte (promise) terug:

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

In die veranderlike van die terugroepfunksie beland die voorwerp met die uitgevoerde funksies:

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

Dit wat by verstek uitgevoer word, sal in die sleutel default wees:

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

Destrukturerings kan uitgevoer word tydens invoer:

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

Maak 'n module wat 'n skikking uitvoer van name van die dae van die week. Met 'n druk op die knoppie importeer hierdie module en vertoon die dae van die week as 'n lys ul.