Tìm hiểu Modules trong JavaScript

Khi chương trình của chúng ta phát triển lớn hơn, nó có thể chứa rất nhiều code. Thay vì chúng ta chỉ viết code trong một file, các bạn có thể sử dụng các module để chia nhỏ các phần code vào các tệp riêng biệt theo chức năng của chúng. Điều này sẽ giúp cho code dễ bảo trì hơn 😁.

JavaScript Modules

Module là một file chứa code để thực hiện một nhiệm vụ cụ thể. Một module có thể chứa các biến, hàm, lớp,...

Ví dụ, một tệp có tên là function.js chứa nội dung sau:

// export hàm
export function randomNumberFrom(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min)
}

Ở đoạn code trên, hàm randomNumberFrom() có chức năng random number trong JavaScript. Nó sẽ trả về một số ngẫu nhiên trong khoảng số cho trước.

Bây giờ, để sử dụng hàm randomNumberFrom() trong file function.js ở một file khác, chúng ta có thể làm như sau:

// import hàm randomNumberFrom từ file function.js
// giả sử 2 file cùng nằm trong 1 folder
import { randomNumberFrom } from './function.js'; 

// dùng hàm randomNumberFrom() để hiển thị số random
let number = randomNumberFrom(1, 5);

console.log(number); // 5

Trong ví dụ trên:

1. Để sử dụng hàm randomNumberFrom() trong function.js ở file khác, thì chúng ta phải export hàm đó ra bằng từ khóa export.
2. Tiếp theo, chúng ta sử dụng randomNumberFrom() trong một file khác bằng cách sử dụng từ khóa import. Để import các functions, objects, ..., bạn cần bao bọc chúng xung quanh {}.

Export các functions, objects,...

Trong một module, chúng ta cũng có thể export nhiều đối tượng.

Ví dụ như trong tệp utilities.js chúng ta có thể export các hàm, hằng số,...

// export biến website
export const website = {name: 'homiedev.com', content: 'front-end blog'};

// export function 
export function randomNumberFrom(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min)
}

Trong một file khác, chúng ta muốn sử dụng các utilities trên thì sử dụng từ khóa import:

// file main.js
import { website, randomNumberFrom } from './utilities.js';

console.log(website.name); // homiedev.com

let random = randomNumberFrom(10, 100);
console.log(random); // 11

Đặt tên thay thế (aliases) cho imports, exports

Trong một số tình huống, nếu các đối tượng như biến, hàm,... bạn muốn import đã có trong tệp chính, chương trình có thể báo lỗi đã tồn tại tên biến, hàm này 😌. Trong trường hợp này, chương trình sẽ lấy đối tượng từ file chính thay vì đối tượng của file được import.

Để tránh xung đột (conflict) về vấn đề tên gọi, chúng ta có thể đổi tên các hàm, đối tượng, ... trong quá trình export hoặc import.

Đổi tên khi export

// file function.js
export {
    function1 as func1,
    function2 as func2
};

// file main.js
import { func1, func2 } from './function.js';

Trong khi export đối tượng từ tệp function.js, các tên mới là func1 và func2 được đặt cho hàm. Khi import, chúng ta sẽ sử dụng tên mới như trên.

Đổi tên khi import

// file function.js
export {
    function1 as func1,
    function2 as func2
};

// file main.js
// khi import, đặt tên khác nếu muốn
import { function1 as func1, function2 as func2 } from './function.js'; 

Trong khi import hàm, các tên mới func1 và func2 được sử dụng cho tên hàm. Chúng ta sẽ sử dụng các tên mới để tham chiếu đến các hàm này.

Default Export

Trong một module, chẳng hạn có rất nhiều hàm, objects chúng ta cần export, chúng ta có thể chọn một hàm, biến,... để đặt làm default. Tức là khi ở file khác khi import không dùng {}. Thì chương trình sẽ hiểu rằng chúng ta đang muốn lấy cái chúng ta đã đặt làm default khi export.

//file utilities.js

// export thông thường
export const name = 'homiedev.com';

// default export
export default function randomNumberFrom(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min)
}

Khi import, chúng ta có thể sử dụng randomNumberFrom đã đặt làm default export bằng cách:

import motTenBatKy from './utilities.js'; // có nghĩa là đang lấy randomNumberFrom (import không sử dụng {})

Chúng ta có thể import đối tượng default và các đối tượng khác bằng cách:

import motTenBatKy, { name } from "./utilities.js"

// motTenBatKy sẽ là randomNumberFrom (đã đặt làm default export)
// name sẽ là biến name trong utilities.js

Một file có thể chứa nhiều đối tượng được export. Tuy nhiên, chúng ta chỉ có thể có một default export trong một file.

Import toàn bộ module

Để import mọi thứ từ một module dưới dạng một object, chúng ta cần sử dụng kí tự hoa thị * như sau:

import * as utilities from './utilities.js';

Trong ví dụ trên, chúng ta đã import tất cả các đối tượng có trong module utilities.js dưới dạng object utilities. Trong trường hợp này, tất cả các đối tượng sẽ trở thành thuộc tính của object utilities, vì vậy chúng ta sẽ truy xuất chúng như dưới đây:

utilities.name;
utilities.randomNumberFrom(1, 10);

import theo kiểu này được gọi là namespace import.

Khi chúng ta sử dụng module trong JavaScript có thể chúng ta đã gặp lỗi sau: "Uncaught SyntaxError: Cannot use import statement outside a module". Để sửa lỗi này chúng ta cần phải thêm type="module" ở thẻ <script>:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ES6 Modules</title>
</head>
<body>
 <script type="module" src="./main.js"></script>
</body>
</html>

Chúng ta có thể chọn đối tượng nào cần export để sử dụng và các đối tượng không export thì file khác sẽ không thể sử dụng được nó ^^.

// utilities.js
function sayHi() {
   console.log('Hi');
}

function sayBye() {
  console.log('Bye');
}
export sayHi;

Trong ví dụ trên, chúng ta đã định nghĩa hàm sayHi() trước rồi export nó. Vì chúng ta không export hàm sayBye() nên ta sẽ không thể truy xuất nó ở trong các module khác. Hàm sayBye() lúc này là private vì ta chỉ có thể sử dụng nó ở trong file utilities.js.