Tạo và sử dụng module trong JavaScript

Trong quá trình phát triển ứng dụng JavaScript, module là một phần quan trọng để tách biệt và quản lý mã của chúng ta. Module cho phép chia nhỏ mã thành các phần nhỏ hơn, mỗi phần đảm nhận một nhiệm vụ cụ thể. Điều này giúp tái sử dụng mã, tăng tính module, và giữ cho mã của chúng ta tổ chức và dễ bảo trì. Trong bài viết này, chúng ta sẽ tìm hiểu cách tạo và sử dụng module trong JavaScript.

Tạo một module

Một module JavaScript là một tập hợp các hàm, biến và đối tượng được đóng gói lại thành một đơn vị độc lập. Để tạo một module, chúng ta có thể sử dụng cú pháp exportimport.

Ví dụ, ta tạo một module đơn giản có tên utils.js chứa một hàm tính tổng của hai số:

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

Looking at JavaScript's Future | Toptal®

Sử dụng module trong một tệp khác

Để sử dụng một module trong một tệp JavaScript khác, chúng ta sử dụng cú pháp import. Bằng cách làm như vậy, chúng ta có thể sử dụng các hàm, biến và đối tượng được xuất (exported) từ module đó.

Ví dụ, ta sử dụng module utils.js đã tạo ở trên trong tệp main.js:

// main.js
import { sum } from './utils.js';
console.log(sum(2, 3)); // Kết quả: 5

What Is JavaScript? A Look at the Web's Most Popular Scripting Language

Sử dụng default export

Ngoài việc xuất nhiều hàm, biến và đối tượng từ một module, chúng ta cũng có thể sử dụng default export để xuất một giá trị duy nhất từ module. Khi sử dụng default export, chúng ta không cần sử dụng tên giống với tên được xuất.

Ví dụ, ta sửa lại module utils.js để xuất kết quả của hàm tính tổng như một giá trị mặc định:

// utils.js
export default function sum(a, b) {
return a + b;
}

 

Trong tệp main.js, ta sử dụng default export như sau:

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

Lazy-Loading JavaScript for High-Speed Webpage Performance

Sử dụng module trong trình duyệt

Để sử dụng module trong trình duyệt, chúng ta cần thêm thuộc tính type="module" vào thẻ <script> của tệp JavaScript.

<script type="module" src="main.js"></script>

 

Lưu ý rằng việc sử dụng module trong trình duyệt yêu cầu máy chủ hỗ trợ HTTP/2 hoặc HTTP/1.1 với header Content-Type: module.

How to Run JavaScript Code

Module là một phần quan trọng trong phát triển ứng dụng JavaScript hiện đại. Chúng cho phép chúng ta tổ chức mã một cách rõ ràng, tăng tính tái sử dụng và giúp giữ mã của chúng ta có cấu trúc và dễ bảo trì. Bằng cách sử dụng cú pháp exportimport, chúng ta có thể tạo và sử dụng các module trong JavaScript một cách dễ dàng và hiệu quả.