Dynamischer Import von ES-Modulen in JavaScript

ES-Module können dynamisch importiert werden. Diese Funktion ist manchmal nützlich. Lassen Sie uns sehen, wie das gemacht wird. Nehmen wir an, wir haben das folgende Modul:

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

Nehmen wir an, wir möchten dieses Modul nicht sofort, sondern bei einem bestimmten Ereignis importieren, zum Beispiel beim Klick auf eine Schaltfläche:

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

Importieren wir das Modul mit dem Befehl import:

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

Der Befehl import liefert als Ergebnis ein Promise zurück:

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

In die Callback-Variable wird ein Objekt mit den exportierten Funktionen übergeben:

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

Was standardmäßig exportiert wird, befindet sich im Schlüssel default:

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

Beim Import kann eine Destrukturierung durchgeführt werden:

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

Erstellen Sie ein Modul, das ein Array mit den Namen der Wochentage exportiert. Bei einem Klick auf eine Schaltfläche importieren Sie dieses Modul und geben Sie die Wochentage als Liste ul aus.