Mô-đun ESM: nhập / xuất

Khi một chương trình phát triển, việc giữ mọi thứ trong một tệp duy nhất trở nên khó khăn. JavaScript hiện đại giải quyết vấn đề với ES module (ESM): mỗi tệp là một mô-đun có thể xuất các hàm, hằng, lớp và các tệp khác có thể nhập chúng.

export

Bạn xuất những gì bạn muốn công khai. Hai hình thức:

// somma.js
export function somma(a, b) {
  return a + b;
}

export const PI = 3.14159;

Hoặc ở cuối tập tin:

function somma(a, b) {
  return a + b;
}
const PI = 3.14159;
export { somma, PI };

import

Từ một tập tin khác:

// app.js
import { somma, PI } from './somma.js';

console.log(somma(1, 2)); // 3
console.log(PI); // 3.14159

Đối tượng { somma, PI } là danh sách tên bạn muốn nhập. Chúng phải phù hợp với tên đã xuất khẩu.

Xuất mặc định

Mỗi mô-đun có thể có một xuất "chính" mà không có tên:

// log.js
export default function log(msg) {
  console.log('[app]', msg);
}

Bạn nhập nó bằng cách chọn tên cục bộ:

import log from './log.js';
log('ciao');

Đổi tên

import { somma as plus } from './somma.js';
export { somma as add } from './somma.js'; // re-export

Một "không gian tên" cho mỗi tệp

Các mô-đun được cô lập: một biến được khai báo trong một tệp không nằm trong phạm vi toàn cục. bạn phải xuất nó một cách rõ ràng để hiển thị nó ở nơi khác. Đây là một cải tiến lớn so với JS kiểu cũ nơi mọi <script> đều chia sẻ window.

Hãy thử nó

Trong các bài tập bên dưới, bạn sẽ không viết cú pháp import/export thực sự — hộp cát là một cú pháp duy nhất tập tin. Thay vào đó, chúng tôi sẽ yêu cầu bạn sắp xếp mã thành các hàm nhỏ riêng biệt để cộng tác, giống như bạn làm nếu mỗi người ở trong một tệp khác nhau.

Xem lại bài tập