Ninja IT

Import và Export

Giới thiệu Javascript module

Bài này sẽ giới thiệu ES module được mô tả trong Javascript từ ES2015. Các chương trình hổ trợ Javascript module này bao gồm các trình duyệt, các build tool như Babal, Webpack cùng với Nodejs và TypeScript.

Mỗi module được viết trong một file và mặc định ở dạng strict mode (tương đương với sử dụng “use strict”).
Thứ hai là các sử dụng module với hai từ khóa import và export.
Tất cả các code trong một file đều là local, tức không thể truy cập được từ bên ngoài. Để đưa các giá trị này ra ngoài, cần sử dụng từ khóa export.

Export

Đầu tiên là giới thiệu về từ khóa export. Export có hai dạng đó là export theo tên và export default. Đầu tiên là export theo tên. Ở export theo tên chúng ta có thể export ra class, function, var, let và const.

1
2
3
4
5
6

// file module.js
export class A {};
export const PI = 3.14;

// file main.js
import { A, PI } from './module.js';

Lưu ý ở trên là dấu {} là rất quan trọng cho biết chúng ta import theo tên.

Export list

Export list là cách export nhiều giá trị cùng một lúc.

1
2
3
4
5
6
7

// file module.js
class A {};
const PI = 3.14;
export { A, PI }; // export list 

// file main.js
import { A, PI } from './module.js';

Export alias

Ngoài ra khi cần chúng ta vẫn có thể đặt lại tên với từ khóa as như sau:

1
2
3
4
5
6

class A {};
const PI = 3.14;
export { A as A1, PI }; // export list 

// file main.js
import { A1 } from './module.js';

Export default

Export default là kiểu export có thêm từ khóa default. Dạng này tương tự với hàm require trong NodeJs.

Ví dụ sau sẽ export theo name và export default.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// file module.js
export class A {};
export const PI = 3.14;
export default {
  age: 20
};

// file main.js
import object, { PI } from './module.js';
console.log(object);
// -> { age : 20 }

Để ý là export default không có {} bao ở trong.
Tiếp theo mình sẽ hướng dẫn câu lệnh import.

Import

Xem các ví dụ trên có lẽ bạn đã hiểu từ khóa import. Ngoài ra còn có thể sử dụng import alias với từ khóa as như sau:

1
2
3
4
5
6
7

// file module.js
class A {};
const PI = 3.14;
export { A , PI };

// file main.js
import { A as A1 } from './module.js'; // import alias

Tiếp theo là import * as name

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// file module.js
class A {};
const PI = 3.14;
export { A , PI };
export default 20;

// file main.js
import * as myModule from './module.js'; // import * as name
console.log(myModule.A); // -> class A
console.log(myModule.PI); // -> 3.14
console.log(myModule.default); // -> 20

Trên đây là cách sử dụng module trong Javascript, để hiểu thêm cách hoạt động của module trong JS thì có thể tham khảo bài viết https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/