JavaScript Modules: Import/Export ES6

Giới thiệu về JavaScript Modules

JavaScript Modules giúp tổ chức và quản lý mã nguồn một cách hiệu quả. Việc sử dụng các module giúp chia nhỏ mã nguồn, tái sử dụng dễ dàng và hỗ trợ việc bảo trì. Đặc biệt, ES6 (ECMAScript 2015) đã giới thiệu cú pháp import và export cho phép lập trình viên dễ dàng quản lý các module trong ứng dụng JavaScript của mình.

Mục lục

• Lợi ích của JavaScript Modules
• Cách sử dụng import/export trong ES6
• Những lưu ý khi sử dụng import/export
• Câu hỏi thường gặp

Lợi ích của JavaScript Modules

• Chia nhỏ mã nguồn: Giúp dễ dàng quản lý và bảo trì hơn.
• Tái sử dụng: Có thể sử dụng lại các module trong nhiều dự án khác nhau.
• Đảm bảo scoping: Các biến và hàm trong module không bị rò rỉ ra ngoài.
• Cải thiện tốc độ tải: Chỉ tải các module cần thiết cho ứng dụng.

Cách sử dụng import/export trong ES6

Để sử dụng import và export trong ES6, bạn cần thực hiện các bước sau:

Bước 1: Tạo module

Tạo một file, ví dụ math.js, với nội dung sau:

export const PI = 3.14;
export function sum(a, b) {
    return a + b;
}

Bước 2: Import module

Trong một file khác, ví dụ app.js, bạn có thể import các giá trị và hàm từ math.js như sau:

import { PI, sum } from './math.js';
console.log(PI); // 3.14
console.log(sum(5, 10)); // 15

Bước 3: Export mặc định

Nếu bạn muốn xuất một giá trị mặc định, bạn có thể làm như sau:

export default function multiply(a, b) {
    return a * b;
}

Và import như sau:

import multiply from './math.js';
console.log(multiply(2, 3)); // 6

Những lưu ý khi sử dụng import/export

• Đảm bảo rằng bạn đang sử dụng phiên bản JavaScript hỗ trợ ES6.
• Các file module cần phải được lưu với phần mở rộng .js.
• Không thể sử dụng import và export trực tiếp trong thẻ <script>. Hãy chắc chắn rằng bạn đang sử dụng type="module".

Câu hỏi thường gặp

1. Tại sao nên sử dụng JavaScript Modules?

JavaScript Modules giúp tổ chức mã nguồn tốt hơn, tái sử dụng dễ dàng và giảm thiểu xung đột giữa các biến toàn cục.

2. Có thể import/export từ một file không phải .js không?

Không, bạn cần phải đảm bảo file module có phần mở rộng .js.

3. Làm thế nào để sử dụng module trong môi trường không hỗ trợ ES6?

Bạn có thể sử dụng các công cụ như Babel để biên dịch mã ES6 sang ES5 để tương thích hơn.