Module là gì?

Viết một số lượng code lớn trong một tệp có thể gây ra vấn đề, vì vậy việc chia nhỏ code thành nhiều phần rất hữu ích.

JavaScript module là cách chia nhỏ code thành các phần có thể sử dụng lại, được lưu trữ trong file khác nhau. 

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

1. Code sẽ mang tính tổ chức hơn

Sử dụng modules sẽ giúp code bạn được sắp xếp hợp lý, đỡ rối hơn. Nếu bạn muốn đổi tên một biến nào đó, bạn không cần phải đổi nó ở khắp mọi nơi trong chương trình.

2. Khả năng sử dụng lại mã

Bạn có thể sử dụng lại các phần đó trong ứng dụng hoặc ứng dụng hoàn toàn mới, giúp bạn tiết kiệm thời gian vì không phải viết lại cùng một đoạn code.

Ngoài ra, nếu bạn thực hiện các thay đổi đối với một module, nó sẽ thay đổi tất cả ở các nơi mà module được dùng, giúp việc bảo trì và cập nhật cơ sở code của bạn trở nên dễ dàng hơn.

3. Không có xung đột đặt tên

Khi làm việc trên một dự án lớn, các nhà phát triển thường viết nhiều hàm và biến. Điều này dẫn đến xung đột đặt tên trùng, gây ra hành vi và lỗi không mong muốn. 

Cách sử dụng Module trong JavaScript

1. Định nghĩa một Module

Đây là cách đơn giản để định nghĩa một module. Tạo 2 file, main.js và generate.js.

File main.js:

let name = "Muhammad Ali"

File generate.js:

function generateUserCertificate(userName, date): 

    # generate user certificate. 

const myName = name

generateUserCertificate(myName, "2023-09-04")

Để sử dụng biến "name" bên trong file generate.js, bạn cần xuất nó từ file main.js và nhập nó vào file generate.js.

2. Các loại Export trong JavaScript

- Default Export

Đây là cách sử dụng Default Export trong JS:

function getAllUser():

export default getAllUser

Lưu ý rằng bạn chỉ có thể sử dụng một lần xuất mặc định trong tệp JavaScript. Bạn có thể export trước khi khai báo:

export default function getAllUser():

- Named Export

Named export cho phép bạn share nhiều module từ một file, không giống default exports chỉ cho phép bạn xuất 1 lần trong 1 file.

Bạn không cần sử dụng cú pháp default khi sử dụng named exports. Named export cũng cần được đặt trong dấu ngoặc kép nếu bạn export nhiều module.

const name = "Muhammad Ali"

export name;

Bạn có thể export trước khi khai báo như sau:

export function sayHi(user) {

  alert(`Hello, ${user}!`);

}

export function sayHello(user) {

  alert(`Hello, ${user}!`);

}

Bạn cũng có thể xuất nhiều biến, function, hoặc lớp sử dụng named export trong 1 dòng duy nhất:

const name = "Muhammad Alli"

function sayHello(user) {

  alert(`Hello, ${user}!`);

}

export {name, sayHello};

Lưu ý, bạn có thể dùng cả default named export trong một module.

const age = 404;

const name = "Muhammad Alli"

export default function sayHello(user) {

  alert(`Hello, ${user}!`);

}

export {age, name};

- Cách để đổi tên một Export

Ta có thể đổi tên module trước lúc export chúng như sau:

export function sayHello(user) {

  alert(`Hello, ${user}!`);

}

export { sayHello as greet };

3. Cách để Import Modules

- Các để import một Default Export 

import getAllUser from "getuser.js";

Bạn có thể sử dụng thêm function getAllUser bất kì đâu trong tệp đó.

- Các để import một Named Export

import {name} from "username.js"

- Cách để import nhiều Named Export

import {name, sayHello} from 'user.js'

- Cách để đổi tên lúc Import

Bạn có thể đổi tên các module export trước khi sử dụng chúng trong file JavaScript:

import {userName as name, greet as sayHello} from 'user.js'

Về cơ bản, nó sẽ import tên và module 1sayHello1 và đổi tên chúng,vì vậy bạn chỉ có thể tham chiếu đến "userName" và "greet" trong module hiện tại.

- Cách import toàn bộ Module

Bạn sẽ làm gì nếu có nhiều module để import và thật phí thời gian khi viết từng dòng named export? Bạn có thể thực hiện như sau:

import * as User from 'user.js'

Đây là cách bạn có thể sử dụng nó trong module được xuất sang:

import * as User from 'user.js'

User.name

User.sayHi

Bài viết đã đi qua những hướng dẫn cơ bản các export và import các module trong JavaScript. Hy vọng bạn sẽ thực hiện thành công.

Nguồn: www.freecodecamp.org

VietnamWorks inTECH

TẠO TÀI KHOẢN MỚI: XEM FULL “1 TÁCH CODEFEE” - NHẬN SLOT TƯ VẤN CV TỪ CHUYÊN GIA - CƠ HỘI RINH VỀ VOUCHER 200K