Code của bạn đang rối tung lên như một mớ bòng bong, biến toàn cục thì loạn xạ đè lên nhau? Mình cũng từng vật lộn với nó trong những dự án đầu tay, khi file script dài hàng ngàn dòng không thể kiểm soát. May sao, khái niệm Module ES6 là gì? xuất hiện như một vị cứu tinh cho giới lập trình viên frontend. Nắm vững JavaScript Module import export hướng dẫn qua hai khái niệm cốt lõi: export default cho "món chính" và export thường (named export) cho "các món phụ", là bạn đã giải quyết được 80% vấn đề cấu trúc code rồi đó. Nếu bạn đang loay hoay xây dựng nền tảng từ con số không, việc tham khảo Học JavaScript cơ bản cho người mới 2026 sẽ là bước đệm tuyệt vời trước khi đi sâu vào module. Cùng Phạm Hải mổ xẻ chi tiết cách áp dụng ngay nhé!
Named export and Default export: When to use which one, here is the answer!
Named export và default export khác nhau như thế nào? Hiểu một cách đơn giản nhất, default export dùng để xuất ra một giá trị duy nhất mang tính đại diện cho cả file, trong khi named export cho phép bạn xuất nhiều biến, hàm hoặc class độc lập từ cùng một file đó.
Default Export: "Vedette" of each module file
Mỗi file module chỉ được phép có duy nhất một default export. Đây thường là thành phần quan trọng nhất, "ngôi sao" của file đó, ví dụ như một class chính xử lý logic hoặc một component giao diện trong React/Vue. Khi tìm hiểu cách sử dụng import export trong JavaScript?, bạn sẽ nhận ra sức mạnh của default export nằm ở chỗ nó cho phép ta đặt tên tùy ý khi import ở một file khác.
Điều này mang lại sự linh hoạt tuyệt vời khi tổ chức mã nguồn. Ví dụ, bạn có file User.js, bạn chỉ cần viết export default class User {}. Sang một file khác, bạn hoàn toàn có thể gọi nó bằng một cái tên thuần Việt: import NguoiDung from './User.js' mà trình duyệt không hề báo lỗi. Tính năng này giúp code dễ đọc hơn khi ngữ cảnh thay đổi.
Named Export: When you need to export a whole "basket" of tools
In contrast to default, named exports is not limited in number in a file. This is the perfect answer to the question how to export multiple values in JavaScript module?. This technique is extremely effective when you have a file containing a series of utility functions specialized for calculating or formatting data. Because modules are part of the ECMAScript 2015 standard, you can see the article ES6 JavaScript new features to know to better understand this powerful ecosystem.
Khi thực hiện import các named exports, bạn bắt buộc phải sử dụng dấu ngoặc nhọn {} và gọi chính xác tên biến đã được export trước đó. Ví dụ: bạn có export const sum = (a, b) => a + b; và export const pi = 3.14;. Ở file đích, bạn sẽ phải viết import { sum, pi } from './math.js'. Sự chặt chẽ này giúp trình duyệt và các công cụ đóng gói biết chính xác bạn đang cần dùng thành phần nào.
Quick comparison table: Place it on the scale for easy selection
To make it easier to visualize and remember, at Pham Hai, we often summarize the core differences through the comparison table below. You can save it for quick reference when coding:
| Criteria | Default Export | Named Export |
|---|---|---|
| Số lượng cho phép | Only 1 per file | Unlimited |
| Cú pháp Import | Không cần cặp ngoặc {} |
Bắt buộc nằm trong {} |
| Quy tắc đặt tên | Optionally change when importing | Phải đúng tên gốc (trừ khi dùng as) |
Advanced import and export "tricks" you need to know
Để làm chủ hoàn toàn các module và viết code như một senior, bạn cần nắm bắt các kỹ thuật nâng cao như đổi tên linh hoạt bằng as, gom nhóm dữ liệu với ký tự *, hoặc cấu trúc lại toàn bộ thư mục bằng kỹ thuật re-export chuyên nghiệp.
Rename "weapon" with the keyword 'as' to avoid duplication
Trong quá trình làm việc thực tế với nhiều thư viện khác nhau, việc trùng lặp tên hàm (ví dụ: cùng có hàm formatDate) là chuyện thường ngày ở huyện. Kỹ thuật đổi tên import export trong JavaScript bằng từ khóa as chính là chiếc phao cứu sinh của bạn. Nó cho phép bạn "thay tên đổi họ" cho module ngay tại thời điểm import để tránh xung đột hệ thống.
Cú pháp rất trực quan: import { fetchData as fetchUserData } from './userApi.js';. Giờ đây, hàm fetchData gốc đã mang một cái tên mới là fetchUserData và hoạt động an toàn trong file hiện tại. Bạn cũng có thể áp dụng cú pháp này ngay lúc export: export { myFunction as newFunctionName };.
Put it all in one basket with 'import * as' - A double-edged sword
Rất nhiều bạn newbie thường thắc mắc Import * as trong JavaScript là gì?. Đây là một cú pháp đặc biệt cho phép bạn gom tất cả các named exports của một file cụ thể vào một object (đối tượng) duy nhất. Ví dụ: thay vì import lẻ tẻ, bạn viết import * as MathUtils from './math.js'. Sau đó, bạn có thể gọi các hàm bên trong bằng cách dùng dấu chấm: MathUtils.sum(1, 2).
However, with experience optimizing project performance, I advise you to be careful with this "trick". Importing an entire large file can increase the final bundle size, hindering the code optimization process (especially the tree-shaking technique that removes redundant code) of tools like Webpack or Vite. Only use it when you really need to use 80-90% of the functions in that file.
Re-export: Professional module "distributor".
Khi dự án phình to ra với hàng chục, hàng trăm file, việc chia nhỏ file là điều bắt buộc để tồn tại. Kỹ thuật Re-export giúp bạn tạo ra một file index.js duy nhất làm cổng giao tiếp (entry point) cho toàn bộ một thư mục. Điều này giúp việc tổ chức mã trở nên cực kỳ gọn gàng, che giấu đi sự phức tạp của cấu trúc thư mục bên trong.
Thay vì bắt người dùng import lẻ tẻ từ nhiều file nhỏ, bạn gom chúng lại tại index.js. Trong lập trình hiện đại, các module thường chứa rất nhiều logic gọi API. Nếu bạn chưa tự tin về cách xử lý bất đồng bộ, hãy đọc qua Async Await Promise JavaScript dễ hiểu để nắm vững nền tảng trước khi đóng gói chúng thành các module phân phối. Cú pháp re-export rút gọn thường dùng là: export { default as UserCard } from './UserCard.js'; hoặc export * from './utilities.js';.
Practice: Integrate JavaScript modules into real HTML projects
Để chạy trực tiếp module ES6 trên môi trường trình duyệt, bạn bắt buộc phải khai báo thuộc tính type="module" trong thẻ script và chạy ứng dụng thông qua một local server ảo để tránh các lỗi bảo mật nghiêm ngặt của trình duyệt.
Kích hoạt "chế độ module" trong HTML với type="module"
Nhiều bạn thắc mắc Sử dụng module JavaScript trong HTML như thế nào? cho đúng chuẩn. Rất đơn giản, bạn chỉ cần thêm thuộc tính type="module" vào thẻ <script> khi gọi file .js gốc của bạn (thường là main.js hoặc app.js). Trình duyệt hiện đại sẽ tự động nhận diện và xử lý file đó như một module độc lập, kích hoạt chế độ Strict Mode mặc định.
Ví dụ cụ thể: <script type="module" src="main.js"></script>. Từ file main.js này, bạn có thể thoải mái import các file khác và bắt đầu thao tác với giao diện. Để làm chủ việc biến đổi giao diện người dùng linh hoạt từ bên trong các module, kỹ năng DOM JavaScript thao tác phần tử HTML là hành trang không thể thiếu đối với mọi lập trình viên frontend.
"Legendary" CORS error when opening HTML files directly and how to fix it in 1 minute
Một kịch bản rất quen thuộc: Bạn viết xong code, click đúp vào file index.html để mở trên Chrome. Bùm! Màn hình trắng tinh và Console báo lỗi đỏ chót liên quan đến CORS. Vậy lỗi CORS khi dùng module JavaScript và cách khắc phục? thực chất là gì? Trình duyệt có cơ chế bảo mật nghiêm ngặt, nó chặn việc load các module thông qua giao thức file:// cục bộ trên máy tính.
Cách khắc phục duy nhất và chuẩn xác nhất là bạn phải chạy code thông qua một môi trường server ảo (Local Server) với giao thức http://. Nếu dùng VSCode, bạn chỉ cần cài extension "Live Server" và nhấn nút "Go Live" là xong. Lỗi CORS này cũng là "khách quen" khi bạn giao tiếp với server bên ngoài, bạn có thể tham khảo thêm bài Fetch API gọi REST API bằng JavaScript để biết cách xử lý triệt để các vấn đề về giao thức mạng.
"Bloody" experience: Organize file and module structure scientifically?
Câu hỏi Tổ chức mã nguồn với JavaScript module? sao cho dễ bảo trì luôn là bài toán khó. Theo chuẩn phát triển web hiện đại, bạn nên phân chia rõ ràng thành các thư mục chức năng như /components (chứa giao diện), /utils (chứa hàm tiện ích), /api (chứa logic gọi data) và /assets (hình ảnh, css).
Ví dụ, các hàm chuyên xử lý lưu trữ dữ liệu trên trình duyệt nên được tách biệt hoàn toàn. Việc hiểu rõ Local Storage Session Storage JavaScript sẽ giúp bạn xây dựng một module storageUtil.js cực kỳ hữu dụng và gọi nó ở bất cứ đâu. Khi dự án lớn hơn, việc kết hợp module ES6 với các công cụ quản lý dependency và đóng gói như Webpack, Vite hay cấu hình "type": "module" trong môi trường Node.js sẽ giúp kiến trúc hệ thống của bạn vững như bàn thạch.
Why use modules? These are benefits that you cannot refuse
Ưu điểm của JavaScript module? Nó mang lại khả năng tái sử dụng code vượt trội, bảo vệ phạm vi biến an toàn tuyệt đối, và cho phép chia nhỏ một ứng dụng khổng lồ thành các phần nhỏ gọn, dễ dàng quản lý và nâng cấp.
Divide and Conquer: Make the source code easier to breathe and maintain
Tính module hóa sinh ra để giúp chúng ta phá vỡ một file code "quái vật" hàng ngàn dòng thành những mảnh ghép nhỏ gọn, logic gọn gàng. Mỗi file module chỉ nên đảm nhận một nhiệm vụ duy nhất (nguyên tắc Single Responsibility). Điều này giúp một team nhiều người có thể làm việc song song trên cùng một dự án mà không lo dẫm chân hay ghi đè code của nhau.
Khi có bug xảy ra ở phần giỏ hàng, bạn biết chính xác chỉ cần mở file cartModule.js để kiểm tra. Nó tiết kiệm hàng giờ đồng hồ mò mẫm trong một mớ code hỗn độn, giúp việc bảo trì và mở rộng tính năng trong tương lai trở nên nhẹ nhàng hơn bao giờ hết.
Reuse code anytime, anywhere without fear of "colliding"
Khả năng tái sử dụng mã (Reusability) là một điểm cộng khổng lồ của ES6 Modules. Bạn chỉ cần tốn công viết một hàm tính toán thuế phức tạp một lần, lưu nó vào taxCalculator.js, và sau đó import nó ở bất kỳ màn hình nào, thậm chí copy sang hẳn một dự án khác để dùng lại.
Modules operate completely independently, keeping the data and logic within them safe. This encapsulation mechanism is very similar to the way closures work in protecting variable privacy. If you want to learn more about this internal data protection mechanism, the article Closure JavaScript explained in an easy to understand article will provide you with an extremely interesting and fundamental technical perspective.
Clean up Global Scope: End the era of global variable "pollution".
Nhớ lại thời kỳ trước khi có ES6 Modules hay các giải pháp server-side như CommonJS, mọi biến bạn khai báo bằng var ở các file script khác nhau đều nhảy thẳng vào phạm vi toàn cục (window object trên trình duyệt). Điều này dẫn đến thảm họa "ô nhiễm" biến: file A vô tình ghi đè giá trị biến của file B chỉ vì trùng tên, gây ra những lỗi ngầm cực kỳ khó debug.
Với kiến trúc module, mọi thứ bạn khai báo (biến, hàm, class) đều bị nhốt chặt trong phạm vi cục bộ của file đó. Trừ khi bạn chủ động dùng từ khóa export để phơi bày nó ra ngoài, không một file nào khác có thể can thiệp hay thay đổi được. Code của bạn nay đã sạch sẽ, minh bạch và an toàn tuyệt đối.
Đấy, chỉ cần nắm vững vài chiêu import/export là bạn đã có thể sắp xếp lại toàn bộ cấu trúc code của mình gọn gàng và chuyên nghiệp hơn hẳn. Đừng coi đây chỉ là mớ lý thuyết khô khan, hãy thử tách ngay một file utils trong project hiện tại của bạn thành module xem sao. Tổ chức code tốt ngay từ đầu sẽ cứu bạn khỏi những đêm OT mệt mỏi dò bug sau này, tin mình đi.
Do you have any "tricks" or hidden rules when naming and structuring module files in your project? Or are you having trouble configuring Webpack for ES6? Don't hesitate to share in the comments section below for fellow developers to discuss and learn!
Note: The information in this article is for reference only. To get the best advice, please contact us directly for specific advice based on your actual needs.
