Bài 8. Mô-đun

Khái niệm và lý thuyết

Khi mã dài, đặt trong một tệp sẽ khó đọc và dễ xung đột tên. Mô-đun cho phép mỗi tệp có phạm vi riêng: chỉ những gì được export mới dùng được từ nơi khác. Điều này giống việc chia sách thành các chương, mỗi chương một chủ đề rõ ràng.

Có hai kiểu export: export có tên (một tệp có thể nhiều, import phải trùng tên trong { }) và export mặc định (mỗi tệp một, import đặt tên tùy ý). Ngoài ra còn mô-đun CommonJS (require) của Node.js đời cũ; nên dùng ES Modules cho mã mới.

npm là kho và công cụ quản lý gói của hệ sinh thái JavaScript. Tệp package.json ghi tên dự án, các lệnh (scripts) và phiên bản thư viện phụ thuộc; package-lock.json khóa chính xác phiên bản để mọi máy cài giống nhau.

export và import

Tệp tien-ich.js:

export const PI = 3.14159;
export function dienTichTron(r) { return PI * r * r; }
export default function chao(ten) { return `Chào ${ten}`; }

Tệp main.js:

import chao, { PI, dienTichTron } from "./tien-ich.js";
console.log(chao("Lan"), dienTichTron(2));

Dùng trong HTML

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

Mô-đun luôn chạy chế độ nghiêm ngặt và tự defer. Cần chạy qua máy chủ (ví dụ extension Live Server), mở trực tiếp tệp có thể bị chặn.

Ví dụ: tách hàm tiện ích ra mô-đun riêng

Tạo tệp tien.js chứa export function dinhDangTien(n){ return n.toLocaleString("vi-VN") + " đ"; }. Ở tệp chính, viết import { dinhDangTien } from "./tien.js"; rồi gọi hàm. Khi hàm này cần sửa, bạn chỉ sửa ở một nơi, mọi chỗ dùng đều cập nhật theo. Đó là lợi ích lớn nhất của mô-đun: mã gọn, dễ tìm, dễ tái sử dụng.

npm và package.json

npm init -y
npm install dayjs
npm install -D vite

import dayjs from "dayjs";
console.log(dayjs().format("DD/MM/YYYY"));

Thư mục node_modules rất nặng, không đưa lên Git; dùng .gitignore.