Bài 8. Mô-đun

Khi mã nhiều lên, chia thành các mô-đun ES giúp dễ đọc, dễ tái sử dụng và dễ bảo trì.

30 phútTrung cấp

Bạn sẽ học được

Thuật ngữ cần biết

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));

<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.

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.

Tình huống: Tách ứng dụng danh sách việc

Chia thành luu-tru.js (đọc ghi localStorage), giao-dien.js (vẽ danh sách) và main.js (nối lại). Mỗi tệp một nhiệm vụ nên dễ tìm lỗi.

Mẹo hay

Mỗi mô-đun nên có một nhiệm vụ rõ ràng; ưu tiên export tên vì dễ tìm và gợi ý tự động.

Lưu ý

Quên đuôi .js khi import tệp cục bộ trong trình duyệt sẽ báo lỗi.

Thực hành

Tóm tắt bài học