Mô-đun JavaScript

Mục lục

Xuất nhiều đối tượng
Đổi tên hàng hóa xuất nhập khẩu
Xuất mặc định
Mô-đun Luôn sử dụng Chế độ nghiêm ngặt
Lợi ích của việc sử dụng mô-đun

Trong hướng dẫn này, bạn sẽ tìm hiểu về các mô-đun trong JavaScript với sự trợ giúp của các ví dụ.

Khi chương trình của chúng tôi phát triển lớn hơn, nó có thể chứa nhiều dòng mã. Thay vì đặt mọi thứ trong một tệp duy nhất, bạn có thể sử dụng các mô-đun để tách các mã trong các tệp riêng biệt theo chức năng của chúng. Điều này làm cho mã của chúng tôi có tổ chức và dễ bảo trì hơn.

Mô-đun là một tệp chứa mã để thực hiện một nhiệm vụ cụ thể. Một mô-đun có thể chứa các biến, hàm, lớp, v.v. Hãy xem một ví dụ,

Giả sử, một tệp có tên là welcome.js chứa đoạn mã sau:

 // exporting a function export function greetPerson(name) ( return `Hello $(name)`; )

Bây giờ, để sử dụng mã của welcome.js trong một tệp khác, bạn có thể sử dụng mã sau:

 // importing greetPerson from greet.js file import ( greetPerson ) from './greet.js'; // using greetPerson() defined in greet.js let displayName = greetPerson('Jack'); console.log(displayName); // Hello Jack

Đây,

Các greetPerson()chức năng trong greet.js được xuất khẩu bằng cách sử dụng exporttừ khóa
```
 export function greetPerson(name) (… )
```
Sau đó, chúng tôi đã nhập greetPerson()vào một tệp khác bằng importtừ khóa. Để nhập các chức năng, đối tượng, v.v., bạn cần phải quấn chúng xung quanh ( ).
```
 import ( greet ) from '/.greet.js';
```

Lưu ý : Bạn chỉ có thể truy cập các chức năng, đối tượng, v.v. đã xuất từ mô-đun. Bạn cần sử dụng exporttừ khóa cho chức năng, đối tượng cụ thể, v.v. để nhập chúng và sử dụng chúng trong các tệp khác.

Xuất nhiều đối tượng

Cũng có thể xuất nhiều đối tượng từ một mô-đun. Ví dụ,

Trong tệp module.js

 // exporting the variable export const name = 'JavaScript Program'; // exporting the function export function sum(x, y) ( return x + y; )

Trong tệp chính,

 import ( name, sum ) from './module.js'; console.log(name); let add = sum(4, 9); console.log(add); // 13

Đây,

 import ( name, sum ) from './module.js';

Thao tác này nhập cả biến tên và sum()hàm từ tệp module.js .

Đổi tên hàng hóa xuất nhập khẩu

Nếu các đối tượng (biến, hàm, v.v.) mà bạn muốn nhập đã có trong tệp chính của bạn, chương trình có thể không hoạt động như bạn muốn. Trong trường hợp này, chương trình lấy giá trị từ tệp chính thay vì tệp đã nhập.

Để tránh xung đột đặt tên, bạn có thể đổi tên các hàm, đối tượng, v.v. này trong quá trình xuất hoặc trong quá trình nhập.

1. Đổi tên trong mô-đun (xuất tệp)

 // renaming import inside module.js export ( function1 as newName1, function2 as newName2 ); // when you want to use the module // import in the main file import ( newName1, newName2 ) from './module.js';

Tại đây, trong khi xuất hàm từ tệp module.js , các tên mới (ở đây, newName1 & newName2) được cấp cho hàm. Do đó, khi nhập hàm đó, tên mới được sử dụng để tham chiếu đến hàm đó.

2. Đổi tên trong tệp nhập

 // inside module.js export ( function1, function2 ); // when you want to use the module // import in the required file with different name import ( function1 as newName1, function2 as newName2 ) from './module.js';

Ở đây, trong khi nhập hàm, các tên mới (ở đây, newName1 & newName2) được sử dụng cho tên hàm. Bây giờ bạn sử dụng các tên mới để tham chiếu các hàm này.

Xuất mặc định

Bạn cũng có thể thực hiện xuất mặc định của mô-đun. Ví dụ,

Trong tệp welcome.js :

 // default export export default function greet(name) ( return `Hello $(name)`; ) export const age = 23;

Sau đó, khi nhập, bạn có thể sử dụng:

 import random_name from './greet.js';

Trong khi thực hiện xuất mặc định,

random_name được nhập từ greet.js. Vì, random_namekhông ở trong greet.js, xuất mặc định ( greet()trong trường hợp này) được xuất dưới dạng random_name.
Bạn có thể sử dụng trực tiếp kết xuất mặc định mà không cần kèm theo dấu ngoặc nhọn ().

Lưu ý : Một tệp có thể chứa nhiều lần xuất. Tuy nhiên, bạn chỉ có thể có một lần xuất mặc định trong một tệp.

Mô-đun Luôn sử dụng Chế độ nghiêm ngặt

Theo mặc định, các mô-đun ở chế độ nghiêm ngặt. Ví dụ,

 // in greet.js function greet() ( // strict by default ) export greet();

Lợi ích của việc sử dụng mô-đun

Cơ sở mã dễ bảo trì hơn vì các mã khác nhau có các chức năng khác nhau nằm trong các tệp khác nhau.
Làm cho mã có thể sử dụng lại. Bạn có thể xác định một mô-đun và sử dụng nó nhiều lần theo nhu cầu của bạn.

Việc sử dụng nhập / xuất có thể không được hỗ trợ trong một số trình duyệt. Để tìm hiểu thêm, hãy truy cập Hỗ trợ xuất / nhập JavaScript.