Tìm hiểu Module trong JavaScript

Trong quá trình phát triển ứng dụng bằng JavaScript, mã nguồn có thể trở nên phức tạp và khó quản lý khi dự án mở rộng. Để giải quyết vấn đề này, Module đã được giới thiệu như một cách hiệu quả để tổ chức, tái sử dụng và bảo trì mã nguồn tốt hơn.

Trước đây, JavaScript không có hệ thống module tích hợp, khiến các lập trình viên phải sử dụng các phương pháp như IIFE (Immediately Invoked Function Expression) hoặc thư viện bên ngoài như RequireJS, CommonJS để quản lý mã nguồn. Tuy nhiên, kể từ ES6 (ECMAScript 2015), JavaScript đã chính thức hỗ trợ ES6 Modules, giúp lập trình viên dễ dàng chia nhỏ chương trình thành các phần nhỏ hơn, độc lập hơn, nhưng vẫn có thể kết nối với nhau khi cần thiết.

Bài viết này sẽ giúp bạn hiểu rõ về Module trong JavaScript, cách khai báo và sử dụng chúng, sự khác biệt giữa ES6 Modules và CommonJS, cũng như các ứng dụng thực tế và cách tổ chức Module hiệu quả trong các dự án lớn.

Module trong JavaScript

Module trong JavaScript là một cách để chia nhỏ chương trình thành các tệp độc lập (modules), mỗi module chứa một phần cụ thể của chương trình và có thể dễ dàng xuất (export) hoặc nhập (import) vào các tệp khác khi cần thiết. Điều này giúp mã nguồn trở nên dễ quản lý hơn, tăng khả năng tái sử dụng và bảo trì.

Lịch sử ra đời và lý do cần có Module

Trước khi ES6 Modules ra đời, JavaScript không có hệ thống module tích hợp. Các lập trình viên phải sử dụng các phương pháp như:

• IIFE (Immediately Invoked Function Expression) để đóng gói mã nguồn.
• CommonJS (sử dụng require() và module.exports), chủ yếu dùng trong Node.js.
• AMD (Asynchronous Module Definition) và RequireJS để quản lý module trong trình duyệt.

Những phương pháp này có nhiều hạn chế, đặc biệt là trong các ứng dụng lớn, dẫn đến xung đột biến toàn cục (Global Scope Pollution) và khó bảo trì mã nguồn. Để giải quyết vấn đề này, ES6 Modules ra đời, giúp JavaScript có một hệ thống module chính thức, chuẩn hóa cách tổ chức mã nguồn.

Lợi ích khi sử dụng Module

Việc sử dụng Module trong JavaScript mang lại nhiều lợi ích quan trọng, bao gồm:

• Tổ chức mã nguồn tốt hơn: Chia nhỏ chương trình thành các phần độc lập, giúp code dễ đọc, dễ hiểu và dễ bảo trì.
• Tăng tính tái sử dụng code: Các Module có thể được sử dụng lại ở nhiều nơi mà không cần viết lại code.
• Giảm xung đột biến toàn cục (Global Scope Pollution): Module giúp giới hạn phạm vi biến trong từng tệp, tránh làm ảnh hưởng đến các phần khác của chương trình.

Nhờ có Module, JavaScript trở nên mạnh mẽ hơn, hỗ trợ lập trình theo mô hình hướng đối tượng (OOP) và giúp phát triển ứng dụng quy mô lớn một cách dễ dàng!

Cách sử dụng Module trong JavaScript

Khai báo và xuất Module (Export)

Trong JavaScript, một module có thể xuất (export) dữ liệu, hàm hoặc class để các tệp khác có thể sử dụng. Có hai cách xuất module trong ES6 Modules:

Named Export (Xuất có tên)

• Cho phép xuất nhiều phần tử trong cùng một module.
• Khi import, cần sử dụng đúng tên đã export.

Ví dụ:
math.js (Module xuất dữ liệu)

export const PI = 3.14159;
export function add(a, b) {
    return a + b;
}
export function subtract(a, b) {
    return a - b;
}

import { PI, add, subtract } from './math.js';

console.log(PI); // 3.14159
console.log(add(5, 3)); // 8
console.log(subtract(10, 4)); // 6

export default function greet(name) {
    return `Hello, ${name}!`;
}

import greet from './message.js';

console.log(greet('Alice')); // Hello, Alice!

import { add, subtract } from './math.js';

import greet from './message.js';

import * as MathUtils from './math.js';

console.log(MathUtils.PI);
console.log(MathUtils.add(2, 3));

<script type="module">
    import { add } from './math.js';
    console.log(add(10, 5)); // 15
</script>

const PI = 3.14159;
function add(a, b) { return a + b; }
module.exports = { PI, add };

const math = require('./math.js');
console.log(math.PI);
console.log(math.add(3, 7));

{
  "type": "module"
}

export const PI = 3.14159;
export function add(a, b) { return a + b; }

import { PI, add } from './math.js';
console.log(PI);
console.log(add(3, 7));

<button id="load">Tải Module</button>
<script type="module">
    document.getElementById('load').addEventListener('click', async () => {
        const { add } = await import('./math.js');
        console.log(add(2, 3)); // Chỉ tải khi nhấn nút
    });
</script>

/project
  /src
    /components    → Chứa các thành phần UI (React/Vue components)
    /utils         → Chứa các hàm tiện ích (utility functions)
    /services      → Chứa các API services
    /constants     → Chứa các hằng số dùng chung
    /config        → Chứa file cấu hình dự án
    index.js       → File khởi động chính

export function add(a, b) { return a + b; }
export function subtract(a, b) { return a - b; }

export function fetchUser() {
    return fetch('https://api.example.com/user').then(res => res.json());
}

export { add, subtract } from './math.js';
export { formatDate } from './date.js';

import { add, formatDate } from './utils';

console.log(add(2, 3));
console.log(formatDate(new Date()));

Access to script at 'file:///path/to/module.js' from origin 'null' has been blocked by CORS policy

SyntaxError: Cannot use import statement outside a module

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js'
  }
};

export function add(a, b) { return a + b; }
export function subtract(a, b) { return a - b; }

import { add } from './math.js'; // Chỉ dùng add()
console.log(add(5, 3));

export async function fetchUsers() {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    return response.json();
}

export function renderUserList(users) {
    const container = document.getElementById('user-list');
    users.forEach(user => {
        const div = document.createElement('div');
        div.textContent = user.name;
        container.appendChild(div);
    });
}

import { fetchUsers } from './api.js';
import { renderUserList } from './render.js';

async function init() {
    const users = await fetchUsers();
    renderUserList(users);
}

init();

<!DOCTYPE html>
<html lang="vi">
<head>
    <title>Danh sách người dùng</title>
</head>
<body>
    <div id="user-list"></div>
    <script type="module" src="app.js"></script>
</body>
</html>

export default function Button({ label, onClick }) {
    return <button onClick={onClick}>{label}</button>;
}

import Button from './components/Button';

function App() {
    return (
        <div>
            <h1>Chào mừng bạn!</h1>
            <Button label="Nhấn vào đây" onClick={() => alert('Hello!')} />
        </div>
    );
}

export default App;

<template>
  <div class="card">
    <h3>{{ title }}</h3>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  props: ['title', 'content']
};
</script>

<style>
.card { border: 1px solid #ddd; padding: 10px; }
</style>

<template>
  <div>
    <Card title="Tiêu đề" content="Nội dung thẻ" />
  </div>
</template>

<script>
import Card from './components/Card.vue';

export default {
  components: { Card }
};
</script>

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserComponent } from './user.component';

@NgModule({
  declarations: [UserComponent],
  imports: [CommonModule],
  exports: [UserComponent]
})
export class UserModule { }

import { UserModule } from './user/user.module';

@NgModule({
  imports: [UserModule],
})
export class AppModule { }

import express from 'express';
import userRoutes from './routes/userRoutes.js';

const app = express();
app.use('/users', userRoutes);

app.listen(3000, () => console.log('Server chạy trên cổng 3000'));

import express from 'express';
import { getUsers } from '../controllers/userController.js';

const router = express.Router();
router.get('/', getUsers);

export default router;

export function getUsers(req, res) {
    res.json([{ id: 1, name: 'Nguyễn Văn A' }, { id: 2, name: 'Trần Thị B' }]);
}