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 export
và import
.
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;
}
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
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
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
.
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 export
và import
, 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ả.