Mô đun trong JavaScript

Mô-đun (Modules)

JavaScript mô-đun cho phép bạn phân tách mã thành các tệp riêng lẻ.

Điều này sẽ giúp dễ dàng bảo trì kho mã.

Mô-đun được sử dụng import từ các tệp ngoại viện được nhập vào trong thẻ <script>.

Mô-đun còn phụ thuộc vào câu lệnh type="module".

Mẫu

<script type="module">
import message from "./message.js";
</script>

Thử trực tiếp

xuất

cóhàmhoặcbiếnmô-đun có thể lưu trữ trong bất kỳ tệp ngoại viện nào.

Xuất có hai loại:Xuất tênvàXuất mặc định.

Xuất tên (Named Exports)

Hãy tạo một tệp có tên là person.js và thêm nội dung cần xuất khẩu vào đó.

Bạn có thể tạo các xuất tên theo hai cách. Một là tạo từng phần-inline, hai là tạo tất cả một lần ở cuối tệp.

Tạo từng phần:

person.js

export const name = "Bill";
export const age = 19;

Tạo một lần duy nhất ở cuối tệp:

person.js

const name = "Bill";
const age = 19;
export {name, age};

Xuất khẩu mặc định (Default Exports)

Hãy tạo một tệp có tên là message.js khác và sử dụng nó để minh họa default export.

Chỉ có thể có một default export trong một tệp.

Mẫu

message.js

const message = () => {
const name = "Bill";
const age = 19;
return name + ' is ' + age + 'years old.';
};
export default message;

Nhập

Bạn có thể nhập module vào tệp theo hai cách, tùy thuộc vào chúng là tên export hay default export.

Tên export được tạo bằng cách sử dụng dấu ngoặc nhọn. Default export không phải vậy.

Nhập từ tên export

Nhập tên export từ tệp person.js:

import { name, age } from "./person.js";

Thử trực tiếp

Nhập default export

Nhập default export từ tệp message.js:

import message from "./message.js";

Thử trực tiếp

Lưu ý

Modun chỉ áp dụng cho protokol HTTP(s).

Trang web mở bằng протокол file:// không thể sử dụng nhập/xuất.