Articles
Giới thiệu về JavaScript
Các mô-đun trong JavaScript

Các mô-đun trong JavaScript

Bài viết này giải thích về các mô-đun trong JavaScript.

YouTube Video

Các mô-đun trong JavaScript

Các mô-đun trong JavaScript là một cách để tổ chức mã và chia nó thành các thành phần có thể tái sử dụng. Bằng cách sử dụng các mô-đun, khả năng đọc và bảo trì mã được nâng cao, và cùng một chức năng có thể được tái sử dụng trong các dự án khác. Ở đây chúng tôi giải thích các hệ thống mô-đun khác nhau, từ khái niệm mô-đun đến các ví dụ sử dụng cụ thể.

Khái niệm về các mô-đun trong JavaScript

Ban đầu, JavaScript không có hệ thống mô-đun. Tuy nhiên, khi các ứng dụng ngày càng lớn hơn, việc chia nhỏ mã thành các đơn vị nhỏ hơn để tái sử dụng đã trở nên quan trọng. Một mô-đun là một đoạn mã có chức năng cụ thể có thể được quản lý độc lập với các mã khác, cho phép nó được chia thành nhiều tệp.

Các loại mô-đun chính

Có một số hệ thống mô-đun trong JavaScript. Những hệ thống phổ biến nhất là ES Modules (ESM) và CommonJS.

  • ES Modules là một hệ thống module được giới thiệu trong ECMAScript 2015 (ES6), định nghĩa các module bằng cách sử dụng các từ khóa import và export. Hệ thống này được sử dụng rộng rãi cả ở phía khách hàng (trình duyệt) và phía máy chủ (Node.js).

  • CommonJS là một hệ thống mô-đun chủ yếu được sử dụng trong Node.js. Các mô-đun được định nghĩa bằng cách sử dụng require và module.exports để nhập và xuất tệp.

Chi tiết về ES Modules (ESM)

ES Modules là hệ thống mô-đun chuẩn trong JavaScript, cho phép trao đổi chức năng dễ dàng giữa các mô-đun. Trong trình duyệt và Node.js, hệ thống này được sử dụng để định nghĩa và nhập các mô-đun.

export và import

export là một từ khóa để đưa ra ngoài các chức năng từ một mô-đun. import được sử dụng để tích hợp các chức năng được định nghĩa trong các mô-đun khác.

Ví dụ: Xuất mô-đun

Các module có thể được xuất ra trong ES Modules như sau.

1// math.mjs
2export function add(a, b) {
3    return a + b;
4}
5export function subtract(a, b) {
6    return a - b;
7}

Trong module math.mjs này, các hàm add và subtract được xuất ra. Các hàm này có thể được nhập từ các mô-đun khác.

Ở đây, .mjs là phần mở rộng tệp để chỉ rõ đây là tệp JavaScript định dạng ES Modules. Trong Node.js, phần mở rộng tệp xác định đó là CommonJS hay ES Modules. Tuy nhiên, nếu type: "module" được chỉ định trong package.json, các tệp có phần mở rộng .js sẽ được coi là ES Modules theo mặc định.

Ví dụ: Nhập Mô-đun

Các module có thể được nhập vào trong ES Modules như sau.

1// main.mjs
2import { add, subtract } from './math.mjs';
3
4console.log(add(3, 5)); // 8
5console.log(subtract(10, 7)); // 3

Bằng cách này, sử dụng import, bạn có thể dễ dàng sử dụng các hàm được định nghĩa trong các tệp khác.

Xuất Mặc Định và Xuất Theo Tên

Có hai phương pháp xuất cho mô-đun. Một phương pháp là xuất theo tên, và phương pháp khác là xuất mặc định.

  • Xuất theo tên được sử dụng khi xuất nhiều hàm hoặc biến từ một mô-đun. Bạn có thể thực hiện nhiều lần xuất, và khi nhập, bạn nhận chúng với các tên đã chỉ định.
1// utils.mjs
2export function sum(a, b) {
3    return a + b;
4}
5export function multiply(a, b) {
6    return a * b;
7}
1// main.mjs
2import { sum, multiply } from './utils.mjs';
3
4console.log(sum(4, 6));       // 10
5console.log(multiply(3, 5));  // 15
  • Xuất mặc định được sử dụng khi xuất một hàm hoặc lớp đơn từ một mô-đun. Khi nhập, nó có thể được nhận dưới bất kỳ tên nào.
1// greet.mjs
2export default function greet() {
3    return "Hello, World!";
4}
1// main.mjs
2import greet from './greet.mjs';
3
4console.log(greet()); // "Hello, World!"

Chỉ có thể thực hiện một lần xuất mặc định, nhưng xuất theo tên có thể xuất nhiều phần tử cùng lúc.

Ví dụ về việc sử dụng ở phía client (trình duyệt).

Ví dụ: Xuất mô-đun

Các module có thể được xuất ra trong ES Modules như sau.

1// utils.js
2export function sum(a, b) {
3    return a + b;
4}
5export function multiply(a, b) {
6    return a * b;
7}

Trong module utils.js này, các hàm sum và multiply được xuất ra.

Ví dụ: Nhập Mô-đun

Các module có thể được nhập vào phía client như sau.

 1<!DOCTYPE html>
 2<html lang="ja">
 3<head>
 4  <meta charset="UTF-8">
 5  <title>ES Modules Sample in HTML</title>
 6</head>
 7<body>
 8  <h1>ES Modules Sample</h1>
 9  <div id="result"></div>
10
11  <script type="module">
12    import { sum, multiply } from './utils.js';
13
14    const result = `
15      <p>sum(3, 5) = ${sum(3, 5)}</p>
16      <p>multiply(10, 7) = ${multiply(10, 7)}</p>
17    `;
18
19    document.getElementById('result').innerHTML = result;
20    console.log(sum(3, 5));      // 8
21    console.log(multiply(10, 7)); // 70
22  </script>
23</body>
24</html>
  • Bằng cách đặt thuộc tính type của thẻ <script> thành module, cú pháp module ES như import và export có thể được sử dụng trong HTML.
  • Câu lệnh import tải tệp utils.js bên ngoài và hiển thị kết quả.

Chi tiết về CommonJS

CommonJS là một hệ thống mô-đun được sử dụng chủ yếu trong Node.js. Các mô-đun được xuất và nhập bằng cách sử dụng module.exports và require.

require và module.exports

Trong CommonJS, module.exports được sử dụng để xuất các mô-đun. Ngoài ra, require được sử dụng để tận dụng các mô-đun từ các tệp khác.

Ví dụ: Xuất mô-đun

Các module có thể được xuất ra trong CommonJS như sau.

1// math.js
2module.exports = {
3    add: function(a, b) {
4        return a + b;
5    },
6    subtract: function(a, b) {
7        return a - b;
8    }
9};
Ví dụ: Nhập Mô-đun

Các module có thể được nhập vào trong CommonJS như sau.

1// main.js
2const math = require('./math.js');
3
4console.log(math.add(4, 7));      // 11
5console.log(math.subtract(9, 2)); // 7

Trong Node.js, CommonJS được sử dụng như hệ thống mô-đun mặc định, nhưng ES Modules cũng được hỗ trợ.

Nhập Động

Trong JavaScript, các mô-đun có thể được nhập động bằng cách sử dụng import(). Phương pháp này sử dụng xử lý bất đồng bộ để tải các mô-đun khi cần.

Việc nhập module động có thể được thực hiện như sau.

1async function loadModule() {
2    const math = await import('./math.js');
3    console.log(math.add(5, 3)); // 8
4}
5
6loadModule();

Nhập động là một cách để cải thiện hiệu suất ứng dụng. Vì bạn có thể tải các mô-đun khi cần thay vì tải tất cả khi tải ban đầu, nó cải thiện tốc độ hiển thị của trang.

Ưu điểm của mô-đun

  • Tái sử dụng mã nguồn

    • Mã nguồn được mô-đun hóa có thể được tái sử dụng trong các dự án khác. Bằng cách tạo các mô-đun với chức năng chung và sử dụng chúng trên nhiều ứng dụng, hiệu quả phát triển được cải thiện đáng kể.

  • Cải thiện khả năng bảo trì

    • Bằng cách chia nhỏ mã thành các mô-đun, việc sửa đổi các tính năng hoặc phần cụ thể trở nên dễ dàng hơn. Quản lý mã trong các đơn vị nhỏ giúp dễ dàng tìm và sửa lỗi hơn.

  • Tránh xung đột không gian tên

    • Khai báo nhiều biến và hàm trong phạm vi toàn cục có thể dẫn đến xung đột tên, nhưng việc mô-đun hóa sẽ ngăn chặn điều này và giúp duy trì mã nguồn sạch hơn.

  • Quản lý phụ thuộc

    • Sử dụng các mô-đun cho phép bạn quản lý rõ ràng các phụ thuộc của một ứng dụng. Điều này giúp xác định rõ mô-đun nào phụ thuộc vào các mô-đun khác, làm cho cấu trúc mã dễ hiểu hơn.

Tóm tắt

Hệ thống mô-đun của JavaScript là một công cụ mạnh mẽ để tổ chức mã và chia nhỏ nó thành các thành phần có thể tái sử dụng. Bằng cách hiểu sự khác biệt giữa ES Modules và CommonJS và chọn hệ thống mô-đun phù hợp dựa trên dự án, bạn có thể nâng cao khả năng đọc và bảo trì mã. Hơn nữa, bằng cách sử dụng dynamic imports, bạn có thể tối ưu hóa hiệu suất ứng dụng.

Hãy tận dụng hệ thống mô-đun để xây dựng các ứng dụng JavaScript có khả năng mở rộng và hiệu quả hơn.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

Các tính năng bổ sung của lớp trong JavaScriptXử lý lỗi trong JavaScript