×

Quản lý modules với import và export trong JavaScript

Trong lập trình JavaScript, việc quản lý các modules (mô-đun) đóng vai trò quan trọng trong việc tổ chức, tái sử dụng và bảo trì mã nguồn. Bằng cách sử dụng các cú pháp "import" và "export", lập trình viên có thể chia nhỏ ứng dụng thành các phần riêng biệt, dễ quản lý hơn.

Mô-đun và lợi ích của chúng

Mô-đun là khối mã độc lập, được dùng để đóng gói các kết quả, hàm, biến hoặc lớp có liên quan lại với nhau, giúp tránh sự xung đột tên và dễ dàng tái sử dụng mã nguồn. Một số lợi ích của việc sử dụng mô-đun bao gồm:

  • Tái sử dụng mã: Các đoạn mã có thể được tái sử dụng ở nhiều nơi khác nhau trong ứng dụng.
  • Bảo trì dễ dàng: Gộp nhóm các chức năng liên quan vào các mô-đun riêng biệt giúp việc bảo trì và nâng cấp mã dễ dàng hơn.
  • Khả năng độc lập: Mô-đun giúp giảm sự phụ thuộc giữa các phần của mã, dễ dàng sửa đổi mà không ảnh hưởng đến toàn bộ hệ thống.

Sử dụng "export" để xuất mã

Để chia sẻ mã từ một mô-đun, ta cần sử dụng từ khóa export. Có hai loại xuất mã chính:

  • Xuất mặc định: Sử dụng khi mô-đun chỉ cần xuất một kết quả chính.
  • Xuất có tên: Cho phép xuất nhiều biến, hàm hoặc lớp từ cùng một mô-đun.

Ví dụ về xuất mặc định:

// file: mathFunctions.js
export default function add(a, b) {
    return a + b;
}

Ví dụ về xuất có tên:

// file: moreFunctions.js
export function subtract(a, b) {
    return a - b;
}

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

Sử dụng "import" để lấy mã

Cú pháp import giúp ta lấy các hàm, biến hoặc lớp từ mô-đun khác đưa vào mô-đun hiện tại.

Ví dụ về việc nhập mô-đun xuất mặc định:

// file: main.js
import add from './mathFunctions.js';
console.log(add(2, 3)); // Kết quả: 5

Ví dụ về việc nhập mô-đun xuất có tên:

// file: main.js
import { subtract, multiply } from './moreFunctions.js';
console.log(subtract(5, 3)); // Kết quả: 2
console.log(multiply(4, 7)); // Kết quả: 28

Thay tên khi nhập mã

Đôi khi, tên của các xuất mô-đun có thể gây xung đột hoặc không phù hợp. Trong trường hợp đó, ta có thể thay tên bằng cách sử dụng as.

Ví dụ:

// file: main.js
import { subtract as sub, multiply as multi } from './moreFunctions.js';
console.log(sub(5, 3)); // Kết quả: 2
console.log(multi(4, 7)); // Kết quả: 28

Xuất và nhập toàn bộ mô-đun

Đôi khi, ta không muốn chỉ nhập một vài phần tử cụ thể, mà cần toàn bộ mô-đun. Cú pháp import * as có thể giúp làm điều đó.

Ví dụ:

// file: main.js
import * as mathFunctions from './moreFunctions.js';
console.log(mathFunctions.subtract(5, 3)); // Kết quả: 2
console.log(mathFunctions.multiply(4, 7)); // Kết quả: 28

Kết luận

Việc quản lý các mô-đun với cú pháp "import" và "export" trong JavaScript là công cụ cơ bản nhưng mạnh mẽ, giúp lập trình viên dễ dàng tổ chức mã nguồn theo cách logic và hiệu quả. Bằng cách tách các phần chức năng thành các mô-đun nhỏ gọn, mã nguồn trở nên dễ bảo trì, mở rộng và tái sử dụng hơn, từ đó tối ưu hóa quá trình phát triển phần mềm.

Comments