Các mô-đun JavaScript – Được giải thích bằng các ví dụ

Một mô-đun là một chức năng hoặc nhóm các chức năng tương tự. Chúng được nhóm lại với nhau trong một tệp và chứa mã để thực thi một tác vụ cụ thể khi được gọi trong một ứng dụng lớn hơn.

Bạn tạo các mô-đun để tổ chức và cấu trúc cơ sở mã của mình tốt hơn. Bạn có thể sử dụng chúng để chia nhỏ các chương trình lớn thành các đoạn mã nhỏ hơn, dễ quản lý hơn và độc lập hơn để thực hiện một hoặc một vài tác vụ liên quan.

Các mô-đun nên là:

1. Độc lập/Tự túc: Một mô-đun phải được tách ra khỏi các phụ thuộc khác càng tốt.
2. Cụ thể: Một mô-đun cần có khả năng thực hiện một hoặc một nhóm nhiệm vụ có liên quan. Bản chất cốt lõi của việc tạo chúng ngay từ đầu là tạo ra các chức năng riêng biệt. Một mô-đun, một (loại) nhiệm vụ.
3. tái sử dụng: Một mô-đun phải dễ dàng tích hợp vào các loại chương trình khác nhau để thực hiện nhiệm vụ của nó.

Để giải thích rõ hơn, hãy để tôi cung cấp cho bạn một sự tương tự:

Giả sử chúng ta muốn xây dựng một ngôi nhà lớn từ đầu. Tất cả các công cụ chúng tôi cần để thiết lập tòa nhà đều được chất đống chỉ trong một căn phòng.

Trong tình huống như vậy, việc tổ chức các công cụ theo đúng cách để chúng ta có thể bắt đầu xây dựng sẽ rất khó khăn.

Thay vì chất đống các phần phụ thuộc riêng biệt chỉ trong một phòng, thay vào đó, chúng ta nên tổ chức từng bộ công cụ liên quan và nhóm chúng vào các phòng khác nhau. Mỗi phòng độc lập và khép kín với các công cụ giải quyết các nhiệm vụ cụ thể.

Chúng ta có thể dán nhãn như: “những công cụ này dùng để lợp mái nhà”, “những công cụ này là để đặt gạch“, “những công cụ này là để đào móng” và như thế.

Bất cứ khi nào chúng tôi muốn một công cụ để thực hiện một nhiệm vụ cụ thể, chúng tôi biết chính xác phải tìm nó ở phòng nào. Bằng cách đó, mọi thứ được tổ chức và định vị hơn nhiều.

Ngoài ra, giả sử chúng ta đã xây xong ngôi nhà và sau đó quyết định xây một thứ khác. Chúng tôi vẫn sẽ có sẵn bộ công cụ tương tự. Điều này thực thi nguyên tắc của khả năng sử dụng lại. Các mô-đun có thể tái sử dụng vì chúng độc lập.

Ví dụ về một mô-đun

Bây giờ trong ngữ cảnh mã, các mô-đun rất quan trọng.

Hãy xem xét một minh họa đơn giản hóa điều này với một ứng dụng thương mại điện tử cho phép mọi người và doanh nghiệp bán sản phẩm trực tuyến. Chương trình này thường bao gồm hai hoặc nhiều nhiệm vụ không liên quan. Ví dụ,

• một chương trình để tạo một tài khoản,
• một chương trình để xác nhận thông tin,
• một chương trình khác để xử lý thanh toán
• một chương trình khác để tính xếp hạng người dùng

và như thế.

Thay vì có tất cả các chương trình không liên quan đó cùng nhau trong một mô-đun/tệp, cách tốt hơn là tạo một số tệp hoặc mô-đun cho mỗi tác vụ đó. Trong trường hợp như vậy, các mô-đun trở thành phụ thuộc.

Sau đó, từ ứng dụng hoặc chương trình chính, bạn chỉ cần nhập/tải các phần phụ thuộc (tức là các mô-đun bạn cần) và thực thi chúng tương ứng. Do đó, ứng dụng chính của bạn trở nên gọn gàng và tối giản hơn.

Ví dụ: giả sử bạn cần xử lý các khoản thanh toán trong một số ứng dụng khác trong cơ sở mã, thì việc sử dụng lại chức năng tương tự trở nên rất dễ dàng. Không cần phải sao chép và dán hoặc mã một chức năng mới từ đầu.

Mô-đun JavaScript

Một mô-đun trong JavaScript chỉ là một tệp chứa mã liên quan.

Trong JavaScript, chúng tôi sử dụng import và export từ khóa để chia sẻ và nhận các chức năng tương ứng trên các mô-đun khác nhau.

• Các export từ khóa được sử dụng để làm cho một biến, hàm, lớp hoặc đối tượng có thể truy cập được vào các mô-đun khác. Nói cách khác, nó trở thành mã công khai.
• Các import từ khóa được sử dụng để mang mã công khai từ mô-đun khác.

Hãy xem xét một ví dụ đơn giản về điều này:

function getPower(decimalPlaces) {
	return 10 ** decimalPlaces;
}

function capitalize(word) {
	return word[0].toUpperCase() + word.slice(1);
}

function roundToDecimalPlace(number, decimalPlaces = 2) {
	const round = getPower(decimalPlaces);
	return Math.round(number * round) / round;
}

export { capitalize, roundToDecimalPlace };

Mô-đun này có ba chức năng được xác định trong đó:

• getPower: Hàm này lấy lũy thừa của một số
• capitalize: Hàm này viết hoa chữ cái đầu tiên trong một từ
• roundToDecimalPlace: Hàm này làm tròn một số đã cho đến một số chữ số thập phân xác định.

Ở cuối tệp, bạn có thể thấy rằng hai trong số ba chức năng đã được xuất. Nói cách khác, chúng trở thành các hàm công khai có thể được sử dụng bởi bất kỳ tập lệnh nào khác.

Để xuất hai chức năng trong số ba chức năng, bạn sử dụng export từ khóa, theo sau là một đối tượng chứa các chức năng bạn muốn cho phép truy cập. Sau khi bạn thực hiện việc này, các chức năng có thể được truy cập bởi bất kỳ chương trình nào trong cơ sở mã yêu cầu chúng.

Hãy xem cách chúng ta có thể sử dụng chúng:

import { capitalize, roundToDecimalPlace } from './main';

function displayTotal(name, total) {
	return `${capitalize(name)}, your total cost is: ${roundToDecimalPlace(total)}`;
}

displayTotal('kingsley', 20.4444444);
// "Kingsley, your total cost is: 20.44"

export { displayTotal };

Các displayTotal.js mô-đun không có capitalize() và roundToDecimalPlace() nhưng muốn sử dụng chức năng viết hoa và làm tròn số thành chữ số thập phân. Vì vậy, làm thế nào chúng tôi mang nó vào? Với import!

Chúng tôi đã làm điều này bằng cách sử dụng import từ khóa theo sau là tên của các chức năng chúng tôi muốn nhập từ mô-đun, trong trường hợp của chúng tôi là capitalize và roundToDecimalPlace.

Điều gì sẽ xảy ra nếu bạn chỉ muốn nhập capitalize chức năng vào chương trình của bạn?

Đơn giản – chỉ nhập khẩu capitalize()như vậy:

import { capitalize } from './main';

function warn(name) {
	return `I am warning you, ${capitalize(name)}!`;
}

warn('kingsley');
// I am warning you, Kingsley!

export { warn };

N/B: Hiểu cách hoạt động của cấu trúc tệp là rất quan trọng khi làm việc với các mô-đun. Trong ví dụ trên, chúng tôi chỉ nhập từ một tệp tồn tại trong cùng thư mục, đó là lý do tại sao chúng tôi sử dụng ký hiệu './import'.

Nếu bạn muốn nhập mọi hàm công khai từ mô-đun khác, hãy sử dụng dấu hoa thị * từ khóa:

import * as mainfunctions from './main';

function warn(name) {
return `I am warning you, ${mainfunctions.capitalize(name)}!`;
}
warn('kingsley');
// I am warning you, Kingsley!

export { warn };

TIỀN BOA: Nếu bạn đang nhập mọi thứ từ một mô-đun, bạn nên sử dụng dấu hoa thị thay vì đánh vần rõ ràng từng hàm một.

Bạn có thể đã nhận thấy as từ khóa. Chúng tôi sử dụng điều này để nhập các hàm công khai vào một đối tượng mới, trong trường hợp của chúng tôi là mainfunctions vật. Sau đó, chúng tôi truy cập và gọi các chức năng mà chúng tôi muốn sử dụng trong chương trình của mình.

Cho đến nay, chúng tôi chỉ xem xét các ví dụ trong đó quá trình xuất diễn ra ở cuối tệp. Nhưng bạn cũng có thể xuất một hàm, biến hoặc lớp bằng cách đăng ký export từ khóa ngay trước định nghĩa của nó, như vậy:

function getPower(decimalPlaces) {
	return 10 ** decimalPlaces;
}

export function capitalize(word) {
	return word[0].toUpperCase() + word.slice(1);
}

export function roundToDecimalPlace(number, decimalPlaces = 2) {
	const round = getPower(decimalPlaces);
	return Math.round(number * round) / round;
}

Nếu bạn so sánh điều này với ví dụ đầu tiên, bạn sẽ nhận thấy sự khác biệt về cú pháp này:

• Trong ví dụ đầu tiên, các export từ khóa đã được sử dụng để xuất hai hàm ở cuối tập lệnh. Trong ví dụ trên, các export từ khóa được gắn vào cả hai chức năng khi chúng đang được xác định.

Tuy nhiên, cả hai đều mang lại cùng một kết quả: capitalize và roundToDecimalPlace cả hai sẽ được xuất khẩu.

Xuất mặc định

Nếu bạn muốn xuất cả ba chức năng nhưng có ý định đặt một trong số chúng làm mặc định (có lẽ vì bạn có nhiều khả năng sử dụng chức năng duy nhất đó), bạn chỉ cần sử dụng default từ khóa.

Từ khóa mặc định làm cho việc nhập hàm dễ dàng hơn. Hãy xem xét ví dụ sau:

export function getPower(decimalPlaces) {
	return 10 ** decimalPlaces;
	}

export default function capitalize(word) {
	return word[0].toUpperCase() + word.slice(1);
	}

export function roundToDecimalPlace(number, decimalPlaces = 2) {
	const round = getPower(decimalPlaces);
	return Math.round(number * round) / round;
	}

Như bạn có thể thấy, chúng tôi đã thực hiện capitalize chức năng mặc định của chúng tôi. Về cơ bản, điều này có nghĩa là chúng tôi đã trao cho nó một số đặc quyền.

Nói rằng chúng tôi muốn nhập khẩu capitalize chức năng từ mô-đun vào một chương trình khác. Cú pháp cho điều đó sẽ rất giống nhau, ngoại trừ việc bạn không phải nhập hàm vào dấu ngoặc nhọn:

import capitalize from './main';

function warn(name) {
	return `I am warning you, ${capitalize(name)}!`;
}

warn('kingsley');
// I am warning you, Kingsley!

export { warn };

Nếu bạn muốn nhập hàm mặc định cùng với bất kỳ hàm nào khác, bạn trộn hàm ‘mặc định’ trần với các hàm khác trong dấu ngoặc nhọn:

import capitalize, { getPower } from './main';

function warn(name) {
	return `I am warning you, ${capitalize(name)}!`;
}

warn('kingsley');
// I am warning you, Kingsley!

export { warn };

kết thúc

Các mô-đun là các đoạn mã độc lập và khép kín. Bạn tạo chúng bằng cách chia chương trình lớn hơn thành các phần hợp lý hoặc các phần phụ thuộc.

Các mô-đun phải độc lập, chuyên biệt và có thể tái sử dụng.

Bạn sử dụng import và export từ khóa để trao đổi chức năng giữa các mô-đun trong JavaScript.

Bạn sử dụng default từ khóa để chỉ định một hàm, đối tượng, biến hoặc lớp mà bạn muốn nhập là lựa chọn đầu tiên.

Với điều này, chúng tôi đã trình bày những kiến ​​thức cơ bản về mô-đun trong JavaScript.

Tôi hy vọng bạn đã nhận được một cái gì đó có giá trị từ bài viết này. Tôi viết các bài viết liên quan đến lập trình hàng tuần trên blog cá nhân của mình

Cảm ơn bạn đã đọc.

P/S: Nếu bạn đang học JavaScript, tôi đã tạo một Sách điện tử dạy 50 chủ đề về JavaScript bằng các ghi chú kỹ thuật số được vẽ bằng tay. Kiểm tra nó ra ở đây.