Export trước khi khai báo

Chúng ta có thể gắn nhãn bất kỳ khai báo nào là được xuất bằng cách đặt export trước nó, có thể là một biến, hàm hoặc một lớp.

Ví dụ:

// export 1 mảng
export let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

// export 1 hằng số
export const MODULES_BECAME_STANDARD_YEAR = 2015;

// export 1 class
export class User {
  constructor(name) {
    this.name = name;
  }
}

Export ở ngoài hàm

Ngoài ra, chúng tôi có thể đặt export riêng.

Ở đây, trước tiên chúng ta khai báo, sau đó xuất:

function sayHi(user) {
  alert(`Hello, ${user}!`);
}

function sayBye(user) {
  alert(`Bye, ${user}!`);
}

export {sayHi, sayBye}; // danh sách các biến đã xuất

Import *

Thông thường, chúng tôi đặt một danh sách những gì cần import trong dấu ngoặc nhọn import {…}, như sau:

import {sayHi, sayBye} from './say.js';

sayHi('Thái'); // Hello, Thái!
sayBye('Thái'); // Bye, Thái!

Nhưng nếu có nhiều thứ cần nhập, chúng ta có thể nhập mọi thứ dưới dạng một đối tượng import * as <obj>, chẳng hạn như:

import * as say from './say.js';

say.sayHi('Thái');
say.sayBye('Thái');

Import “as”

Chúng tôi cũng có thể sử dụng as để nhập dưới các tên khác nhau.

Ví dụ: hãy nhập sayHi vào biến cục bộ hi cho ngắn gọn và nhập sayBye dưới dạng bye:

// main.js
import {sayHi as hi, sayBye as bye} from './say.js';

hi('Thái'); // Hello, Thái!
bye('Thái'); // Bye, Thái!

Export “as”

Cú pháp tương tự tồn tại cho export.

Hãy xuất các hàm dưới dạng hi và bye:

// say.js
...
export {sayHi as hi, sayBye as bye};

Bây giờ hi và bye là tên chính thức của người ngoài, được sử dụng trong hàng nhập khẩu:

// 📁 main.js
import * as say from './say.js';

say.hi('Thái'); // Hello, Thái!
say.bye('Thái'); // Bye, Thái!

Export default

Trong thực tế, chủ yếu có hai loại mô-đun.

1. Các mô-đun có chứa một thư viện, gói các chức năng, như say.js trên.
2. Các mô-đun khai báo một thực thể duy nhất, ví dụ: một mô-đun user.js chỉ xuất khẩu class User.

Phần lớn, cách tiếp cận thứ hai được ưu tiên hơn, để mọi “thứ” đều nằm trong mô-đun riêng của nó.

Đương nhiên, điều đó đòi hỏi rất nhiều tệp, vì mọi thứ đều muốn mô-đun riêng của nó, nhưng đó không phải là một vấn đề. Trên thực tế, việc điều hướng mã trở nên dễ dàng hơn nếu các tệp được đặt tên tốt và có cấu trúc thành các thư mục.

Các mô-đun cung cấp một export default cú pháp đặc biệt (“default export”) để làm cho cách “một thứ cho mỗi mô-đun” trông đẹp hơn.

Đặt export default trước thực thể để export:

// 📁 user.js
export default class User { // chỉ cần thêm "default"
  constructor(name) {
    this.name = name;
  }
}

Có thể chỉ có một export default trên mỗi tệp.

… Và sau đó nhập nó mà không có dấu ngoặc nhọn:

// 📁 main.js
import User from './user.js'; // không phải{User}, chỉ cần ghi User

new User('Thái');

Hàng nhập khẩu không có dấu ngoặc nhọn trông đẹp hơn. Một sai lầm phổ biến khi bắt đầu sử dụng mô-đun là quên dấu ngoặc nhọn. Vì vậy, hãy nhớ rằng, import cần dấu ngoặc nhọn cho các bản xuất được đặt tên và không cần chúng cho bản xuất mặc định.