Nhập khẩu động ES Module trong JavaScript

ES module có thể được nhập khẩu một cách động. Tính năng này đôi khi rất hữu ích. Hãy xem cách thực hiện. Giả sử chúng ta có module sau:

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

Giả sử chúng ta muốn nhập khẩu module này không phải ngay lập tức, mà theo một sự kiện nào đó, ví dụ: khi nhấp vào nút:

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

Hãy nhập khẩu module bằng lệnh import:

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

Lệnh import trả về một promise là kết quả của nó:

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

Vào biến callback sẽ nhận được một đối tượng với các hàm đã xuất:

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

Phần được xuất theo mặc định sẽ nằm trong khóa default:

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

Có thể thực hiện việc hủy cấu trúc khi nhập khẩu:

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

Tạo một module xuất một mảng tên các ngày trong tuần. Khi nhấn nút, hãy nhập khẩu module này và hiển thị các ngày trong tuần dưới dạng danh sách ul.