Tìm hiểu đôi nét về JavaScript module format.

Những ngày đầu tiếp xúc với JS, mình viết tất cả code trong 1 file một cho đến khi nó quá là dài đi 😅. Mình đã tự hỏi làm thế nào để quản lí code một cách hiệu quả hơn? Có cách nào để chia nhỏ file hay không?... Và thế là mình đã tìm hiểu về module trong JS và biết đến các module format như CJS, AMD, UMD và ESM. Trong bài viết này mình sẽ viết đôi nét về các module format trên.

JavaScript module là gì?

Module là gì?

Như bất cập mình nói ở đầu bài viết, có thể hiểu module như một "đơn vị" code mà bạn đã chia nhỏ. Thông thường thì 1 module sẽ tương ứng với 1 tệp chứa code JavaScript để thực hiện nhiệm vụ cụ thể (có thể chứa các biến, hàm, lớp,...).

Ví dụ bạn có 1 module chứa các hàm tính toán gọi là calculator.js.

Một số lợi ích khi dùng module

Module có thể được chèn ở nhiều file khác nhau tránh việc Ctrl + C + Ctrl + V nhiều lần => Khả năng tái sử dụng cao, rút gọn code thừa.
Sử dụng module giúp chia nhỏ code thành nhiều file, mỗi file thực hiện một tập hợp những nhiệm vụ nhất định chạy độc lập => Dễ quản lí, bảo trì.
Các biến được thiết lập trong một scope nhất định không bị ảnh hưởng từ scope khác => Dễ kiểm soát biến hơn.

Module format: cú pháp để xác định một module, phổ biến gồm

CommonJS (CJS)
Asynchronous Module Definition (AMD)
Universal Module Definition (UMD)
ES2015 Modules (ESM - ES6)

Hiểu về sự khác biệt giữa các module formats

1️⃣ CommonJS (CJS)

Là một trong những format đầu tiên được tạo ra và có thể nói gắn liền với Nodejs, chắc hẳn bạn cũng không cảm thấy xa lạ với CJS. Dấu hiệu nhanh nhất để nhận ra là sử dụng các keywords require và module.exports.

const name = require("module");
...
module.exports = {
...
}

Đây này là một synchronous API và nó không chạy trên browser một cách trực tiếp. Nó cần đi kèm với transpiler và bundler.

Khi import, nó sẽ trả về bản sao của đối tượng đã import đó.

2️⃣ Asynchronous Module Definition (AMD)

Một đội ngũ của CJS muốn khắc phục tính đồng bộ, thay bằng asynchronous API nên đã tạo nên AMD.

define(function(require) {
    require("module");
    ...
 }

AMD sử dụng cho Frontend còn CJS cho Backend.

3️⃣ Universal Module Definition (UMD)

UMD làm việc ở cả Frontend và Backend, được tạo ra dựa trên AMD và tương thích với một số cases trong CJS. Thường được sử dụng như fallback module khi dùng bundler như Rollup/Webpack.

4️⃣ ES2015 Modules (ESM)

ECMAScript version history theo Wikipedia:

ESM là module phổ biến nhất được nhận biết bởi keywords import và export. ECMA team đã quyết định tạo ECMAScript 2015 (hay còn gọi là ES6) với các tiêu chí: Easy to read - Easy to analyze for static code analyzer - Supported everywhere.

import { name } from "module";
...
export const something = {
...
}

ESM hoạt động trên nhiều browsers hiện đại và gần như chứa mọi ưu điểm của các modules khác. ESM cho phép các bundlers như Rollup có thể xóa những đoạn code không cần thiết, giúp tránh code dư thừa và tăng hiệu suất load trang.

Tạm kết

Bài viết này mình viết một cách ngắn gọn nhất theo cách hiểu của mình, mong là bạn có cái nhìn tổng quát về JavaScript module format 😄.

Nguồn tham khảo: Xem nguồn

Tran Phuong Van's Blog