Một mô -đun là một hàm hoặc một 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 vào 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 bạn tốt hơn. Bạn có thể sử dụng chúng để chia các chương trình lớn thành các phầ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 nhiệm vụ liên quan. Các mô -đun nên được: Để giải thích rõ hơn, hãy để tôi 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à khổng lồ từ mặt đất lên. Tất cả các công cụ chúng ta cần để thiết lập tòa nhà đều được đóng đinh chỉ trong một 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ẽ khó khăn. Thay vì có các phụ thuộc riêng biệt được cắm vào 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 là độ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 tôi có thể đưa ra các nhãn như: "Những công cụ này là để lợp", "những công cụ này là để đặt gạch", "những công cụ này là để đào nền", v.v."these tools are for roofing", "these tools are for brick laying",
"these tools are for foundation digging" and so on. 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 sẽ biết chính xác nơi tìm thấy nó. 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 tôi đã xây dựng ngôi nhà và sau đó quyết định xây dựng một cái gì đó khác biệt. Chúng tôi vẫn sẽ có cùng một bộ công cụ. Điều này thực thi nguyên tắc tái sử dụng. Các mô-đun có thể tái sử dụng vì chúng khép kín.reusability. Modules are reusable because they are self-contained. Bây giờ trong bối cảnh của mã, các mô -đun là rất quan trọng.Ví dụ về một mô -đun
Hãy xem xét một minh họa đơn giản hóa này với ứ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 sẽ 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 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 toán 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, việc tạo một số tệp hoặc mô -đun, tốt hơn là tạo ra 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ụ thuộc [tức là các mô -đun bạn cần] và thực hiện chúng cho phù hợp. Kết quả là, ứng dụng chính của bạn trở nên sạch hơn và tối thiểu hơn.
Giả sử bạn cần xử lý thanh toán trong một số ứng dụng khác trong cơ sở mã, ví dụ, việc sử dụng lại chức năng tương tự rất dễ dàng. Không cần sao chép và dán hoặc mã hóa một chức năng mới từ đầu.
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 các từ khóa import
và export
để chia sẻ và nhận các chức năng tương ứng trên các mô -đun khác nhau.
- Từ khóa
export
được sử dụng để tạo một biến, hàm, lớp hoặc đối tượng & nbsp; có thể truy cập vào các mô -đun khác. Nói cách khác, nó trở thành một mã công cộng. - Từ khóa
import
được sử dụng để mang mã công khai từ một mô -đun khác.
Chúng ta hãy xem 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 };
filepath/main.jsMô -đun này có ba chức năng được xác định trong đó:
2: Hàm này có được sức mạnh của một số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 };
3: Chức năng này viết hoa chữ cái đầu tiên trong một từ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 };
4: Hàm này làm tròn một số nhất định cho một số vị trí thập phân được chỉ định.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 };
Vào 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 chức năng công cộng có thể được sử dụng bởi bất kỳ kịch bản nào khác.
Để xuất hai chức năng trong số ba chức năng, bạn sử dụng từ khóa export
, theo sau là một đối tượng chứa các chức năng bạn muốn có thể truy cập được. Khi bạn làm điều 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 };
filepath/displayTotal.jsMô-đun
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 };
6 không có 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 };
7 và 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 };
8 nhưng muốn sử dụng chức năng viết hoa và vòng tròn đến nay. Vậy làm thế nào chúng ta mang nó vào? Với import
!Chúng tôi đã làm điều này bằng cách sử dụng từ khóa import
theo sau 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à
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 };
3 và 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 };
4.Điều gì sẽ xảy ra nếu bạn chỉ muốn nhập chức nă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 };
3 vào chương trình của bạn?Đơn giản - chỉ nhập
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 };
7, 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 thức cấu trúc tệp hoạt động 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ỉ đơn giản là nhập từ một tệp tồn tại trong cùng một thư mục, đó là lý do tại sao chúng tôi sử dụng ký hiệu5.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 mọi chức năng công khai từ một mô -đun khác, hãy sử dụng từ khóa Asterisk
import { capitalize } from './main';
function warn[name] {
return `I am warning you, ${capitalize[name]}!`;
}
warn['kingsley'];
// I am warning you, Kingsley!
export { warn };
6: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 };
FilePath/Warn.jsMẹo: Nếu bạn đang nhập mọi thứ từ một mô-đun, bạn nên sử dụng Asterisk thay vì đánh vần rõ ràng tất cả các chức năng từng chức năng.: If you're importing everything from a module, you should use the asterisk instead of explicitly spelling out all the functions one-by-one.
Bạn có thể nhận thấy từ khóa
import { capitalize } from './main';
function warn[name] {
return `I am warning you, ${capitalize[name]}!`;
}
warn['kingsley'];
// I am warning you, Kingsley!
export { warn };
7. Chúng tôi sử dụng điều này để nhập các chức năng công cộng vào một đối tượng mới, trong trường hợp của chúng tôi là đối tượng import { capitalize } from './main';
function warn[name] {
return `I am warning you, ${capitalize[name]}!`;
}
warn['kingsley'];
// I am warning you, Kingsley!
export { warn };
8. Sau đó, chúng tôi truy cập và gọi các chức năng 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 đó xuất khẩu xảy ra ở cuối tệp. Nhưng bạn có thể xuất bằng một hàm, biến hoặc lớp bằng cách đăng ký từ khóa export
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;
}
filepath/anothermain.jsNế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 cú pháp này:
- Trong ví dụ đầu tiên, từ khóa
export
đã được sử dụng để xuất hai hàm ở cuối tập lệnh. Trong ví dụ trên, từ khóaexport
được gắn vào cả hai chức năng khi chúng được xác định.
Tuy nhiên, cả hai đều cung cấp cùng một kết quả:
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 };
3 và 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 };
4 sẽ được xuất khẩu.Xuất khẩu mặc định
Nếu bạn muốn xuất cả ba chức năng nhưng có ý định biến một trong số chúng là mặc định [có lẽ vì bạn rất có thể sử dụng chức năng duy nhất đó], bạn chỉ cần sử dụng 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 };
4.Từ khóa mặc định làm cho việc nhập một chức năng 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;
}
filepath/default.jsNhư bạn có thể thấy, chúng tôi đã thực hiện
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 };
3 Chức năng mặc định của chúng tôi. Điều này về cơ bản có nghĩa là chúng tôi đã cho nó một số loại đặc quyền.Giả sử chúng tôi muốn nhập chức nă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 };
3 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ừ bạn không phải nhập chức năng vào niềng răng xoăn:import capitalize from './main';
function warn[name] {
return `I am warning you, ${capitalize[name]}!`;
}
warn['kingsley'];
// I am warning you, Kingsley!
export { warn };
filepath/warndefault.jsNếu bạn muốn nhập chức năng mặc định cùng với bất kỳ chức năng nào khác, bạn sẽ trộn hàm 'mặc định' trần 'với các chức năng khác trong niềng răng xoă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 };
filepath/mixed.jsGói lên
Các mô-đun là độc lập và khép kín các đoạn mã. Bạn tạo chúng bằng cách chia một chương trình lớn hơn thành các phần logic hoặc phụ thuộc.
Các mô -đun nên độc lập, chuyên môn và có thể tái sử dụng.
Bạn sử dụng các từ khóa import
và export
để trao đổi chức năng giữa các mô -đun trong JavaScript.
Bạn sử dụng 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 };
4 để chỉ định hàm, đối tượng, biến hoặc lớp mà bạn muốn là nhập lựa chọn đầu tiên.Với điều này, chúng tôi đã đề cập đến những điều cơ bản của các mô -đun trong JavaScript.
Tôi hy vọng bạ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 mỗi tuần trên blog cá nhân của tôi
Cảm ơn bạn đã đọc.
P/S: Nếu bạn đang học JavaScript, tôi đã tạo một ebook dạy 50 chủ đề trong JavaScript với các ghi chú kỹ thuật số vẽ tay. Kiểm tra nó ở đây.: If you are learning JavaScript, I created an eBook which teaches 50 topics in JavaScript with hand-drawn digital notes. Check it out here.
Học mã miễn phí. Chương trình giảng dạy nguồn mở của Freecodecamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu