JavaScript Modules: Building Blocks of Modern Web Development
Xin chào các bạn future JavaScript wizards! Hôm nay, chúng ta sẽ cùng khám phá thế giới fascinatings của JavaScript modules. Là người dạy máy tính hàng xóm thân thiện của bạn, tôi rất háo hức dẫn dắt các bạn trong hành trình này. Vậy, hãy cầm lấy những cây phép ảo (bàn phím) của mình, và cùng thực hiện một chút phép màu module nào!
What is a Module? (Gì là một Module?)
Hãy tưởng tượng bạn đang xây dựng một lâu đài Lego khổng lồ. Thay vì cố gắng xây dựng nó một lần, liệu có dễ dàng hơn nếu tạo ra những mảnh nhỏ, dễ quản lý và sau đó ghép chúng lại? Đó chính xác là điều modules làm trong JavaScript!
Một module là một đoạn mã tự chứa thực hiện một chức năng cụ thể. Nó giống như một mini-chương trình trong chương trình chính của bạn. Modules giúp chúng ta tổ chức mã, làm cho nó dễ bảo trì hơn và cho phép chúng ta tái sử dụng chức năng across khác nhau trong ứng dụng của mình.
Hãy bắt đầu với một ví dụ đơn giản:
// mathModule.js
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}Trong ví dụ này, chúng ta đã tạo một module叫做 mathModule.js. Nó chứa hai hàm: add và subtract. Từ khóa export làm cho các hàm này có thể sử dụng trong các phần khác của chương trình của chúng ta.
Bây giờ, hãy xem cách chúng ta có thể sử dụng module này:
// main.js
import { add, subtract } from './mathModule.js';
console.log(add(5, 3)); // Output: 8
console.log(subtract(10, 4)); // Output: 6Ở đây, chúng ta đang nhập khẩu các hàm add và subtract từ tệp mathModule.js của chúng ta. Chúng ta có thể sử dụng các hàm này như thể chúng được định nghĩa trong tệp main.js.
Export Multiple Objects from a Single Module (Xuất nhiều đối tượng từ một module duy nhất)
Bây giờ chúng ta đã hiểu được cơ bản, hãy xem cách chúng ta có thể xuất nhiều đối tượng từ một module duy nhất. Điều này giống như packing nhiều công cụ trong hộp công cụ JavaScript của bạn!
// toolbox.js
export const hammer = {
use: () => console.log("Bang! Bang!"),
weight: 2
};
export function screwdriver() {
console.log("Twist! Twist!");
}
export class Saw {
cut() {
console.log("Zzzz! Zzzz!");
}
}Trong module toolbox.js, chúng ta đang xuất một đối tượng (hammer), một hàm (screwdriver) và một lớp (Saw). Hãy sử dụng chúng:
// workshop.js
import { hammer, screwdriver, Saw } from './toolbox.js';
hammer.use(); // Output: Bang! Bang!
console.log(hammer.weight); // Output: 2
screwdriver(); // Output: Twist! Twist!
const mySaw = new Saw();
mySaw.cut(); // Output: Zzzz! Zzzz!Thấy cách chúng ta có thể nhập và sử dụng các loại xuất khác nhau chưa? Đó giống như có một adapter phổ biến cho tất cả các công cụ JavaScript của bạn!
Default Exports (Xuất mặc định)
Đôi khi, bạn có thể có một module chủ yếu làm một điều gì đó. Trong trường hợp này, bạn có thể sử dụng xuất mặc định. Điều này giống như có một cầu thủ ngôi sao trong đội JavaScript của bạn!
// superHero.js
export default class SuperHero {
constructor(name) {
this.name = name;
}
fly() {
console.log(`${this.name} is flying!`);
}
}
export function sidekick() {
console.log("I'm here to help!");
}Trong module này, chúng ta có một xuất mặc định (SuperHero class) và một xuất có tên (sidekick function). Hãy sử dụng chúng:
// comicBook.js
import Hero, { sidekick } from './superHero.js';
const batman = new Hero("Batman");
batman.fly(); // Output: Batman is flying!
sidekick(); // Output: I'm here to help!Chú ý rằng chúng ta nhập khẩu xuất mặc định (Hero) mà không cần dấu ngoặc vuông? Đó là đặc biệt đối với xuất mặc định!
Rename Import and Export (Đổi tên nhập khẩu và xuất khẩu)
Đôi khi, bạn có thể muốn sử dụng một tên khác cho một hàm hoặc biến nhập khẩu. JavaScript có bạn covered với tính năng rename. Điều này giống như giving your imported tools biệt danh!
// colors.js
export const red = "#FF0000";
export const blue = "#0000FF";
export const green = "#00FF00";Bây giờ, hãy nhập khẩu và đổi tên:
// palette.js
import { red as crimson, blue as navy, green } from './colors.js';
console.log(crimson); // Output: #FF0000
console.log(navy); // Output: #0000FF
console.log(green); // Output: #00FF00Bạn cũng có thể đổi tên khi xuất:
// shapes.js
const circle = (radius) => Math.PI * radius * radius;
const square = (side) => side * side;
export { circle as round, square };Và nhập khẩu như sau:
// geometry.js
import { round, square } from './shapes.js';
console.log(round(5)); // Output: 78.53981633974483
console.log(square(4)); // Output: 16Methods Table (Bảng phương thức)
Dưới đây là bảng tiện ích tóm tắt các phương thức chúng ta đã bao gồm:
| Phương thức | Mô tả | Ví dụ |
|---|---|---|
export |
Làm cho các hàm, đối tượng hoặc giá trị có thể sử dụng trong các module khác | export function add(a, b) { return a + b; } |
import |
Cho phép bạn sử dụng các hàm, đối tượng hoặc giá trị từ các module khác | import { add } from './mathModule.js'; |
export default |
Xuất một giá trị duy nhất làm xuất chính của một module | export default class SuperHero { ... } |
import as |
Đổi tên một giá trị nhập khẩu | import { red as crimson } from './colors.js'; |
export as |
Đổi tên một giá trị xuất | export { circle as round }; |
Và thế là bạn đã có nó, các bạn! Bạn vừa nâng cấp kỹ năng JavaScript của mình với modules. Nhớ rằng, thực hành là cách tốt nhất để trở nên hoàn hảo, vì vậy đừng ngần ngại thử nghiệm với các khái niệm này. Trước khi bạn biết điều gì, bạn sẽ trở thành một chuyên gia xây dựng ứng dụng JavaScript modulized như một pro!
Chúc các bạn vui vẻ编码, và hy vọng các module sẽ luôn ở bên bạn! ?????
Credits: Image by storyset