Tuyên bố
7 tĩnh được sử dụng để nhập các ràng buộc trực tiếp chỉ đọc được xuất bởi một mô-đun khác. Các ràng buộc được nhập được gọi là ràng buộc trực tiếp vì chúng được cập nhật bởi mô -đun xuất trình liên kết, nhưng không thể được sửa đổi bằng mô -đun nhập.import { myExport } from "/modules/my-module.js";
7 declaration is used to import read-only live bindings which are exported by another module. The imported bindings are called live bindings because they are updated by the module that exported the binding, but cannot be modified by the importing module.import { myExport } from "/modules/my-module.js";
Để sử dụng khai báo
import { myExport } from "/modules/my-module.js";
7 trong tệp nguồn, tệp phải được giải thích bằng thời gian chạy dưới dạng mô -đun. Trong HTML, điều này được thực hiện bằng cách thêm import { myExport } from "/modules/my-module.js";
9 vào thẻ import { foo, bar } from "/modules/my-module.js";
0. Các mô -đun được tự động giải thích trong chế độ nghiêm ngặt.Ngoài ra còn có một
import { foo, bar } from "/modules/my-module.js";
1 động giống như hàm, không yêu cầu các tập lệnh là import { myExport } from "/modules/my-module.js";
9.Cú pháp
import defaultExport from "module-name";
import * as name from "module-name";
import { export1 } from "module-name";
import { export1 as alias1 } from "module-name";
import { default as alias } from "module-name";
import { export1, export2 } from "module-name";
import { export1, export2 as alias2, /* … */ } from "module-name";
import { "string name" as alias } from "module-name";
import defaultExport, { export1, /* … */ } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
import { foo, bar } from "/modules/my-module.js";
3Tên sẽ đề cập đến xuất mặc định từ mô -đun. Phải là một định danh JavaScript hợp lệ.
import { foo, bar } from "/modules/my-module.js";
4Mô -đun để nhập từ. Việc đánh giá của nhà xác định được chỉ định bởi máy chủ. Đây thường là một URL tương đối hoặc tuyệt đối với tệp
import { foo, bar } from "/modules/my-module.js";
5 chứa mô -đun. Trong nút, nhập khẩu không có phần mở rộng thường đề cập đến các gói trong import { foo, bar } from "/modules/my-module.js";
6. Một số gói nhất định có thể cho phép nhập các tệp mà không cần tiện ích mở rộng; Kiểm tra môi trường của bạn. Chỉ cho phép các chuỗi được trích dẫn và trích dẫn kép.import { foo, bar } from "/modules/my-module.js";
7Tên của đối tượng mô -đun sẽ được sử dụng như một loại không gian tên khi đề cập đến nhập khẩu. Phải là một định danh JavaScript hợp lệ.
import { foo, bar } from "/modules/my-module.js";
8Tên của xuất khẩu sẽ được nhập khẩu. Tên có thể là một định danh hoặc một chuỗi theo nghĩa đen, tùy thuộc vào những gì
import { foo, bar } from "/modules/my-module.js";
4 tuyên bố xuất khẩu. Nếu đó là một chuỗi theo nghĩa đen, nó phải được đặt bí danh cho một định danh hợp lệ.import { reallyReallyLongModuleExportName as shortName } from "/modules/my-module.js";
0Tên sẽ đề cập đến nhập khẩu được đặt tên. Phải là một định danh JavaScript hợp lệ.
Sự mô tả
Các khai báo
import { myExport } from "/modules/my-module.js";
7 chỉ có thể có mặt trong các mô-đun và chỉ ở cấp cao nhất [nghĩa là không phải bên trong các khối, chức năng, v.v.]. Nếu một tuyên bố import { myExport } from "/modules/my-module.js";
7 gặp phải trong các bối cảnh không mô-đun [ví dụ: các thẻ import { foo, bar } from "/modules/my-module.js";
0 mà không có import { myExport } from "/modules/my-module.js";
9, import { reallyReallyLongModuleExportName as shortName } from "/modules/my-module.js";
5, import { reallyReallyLongModuleExportName as shortName } from "/modules/my-module.js";
6, tất cả đều có "tập lệnh" hoặc "cơ thể chức năng" khi các mục tiêu phân tích cú pháp], một import { reallyReallyLongModuleExportName as shortName } from "/modules/my-module.js";
7 được ném. Để tải các mô-đun trong bối cảnh không mô-đun, hãy sử dụng cú pháp nhập động thay thế.Các khai báo
import { myExport } from "/modules/my-module.js";
7 được thiết kế để có cú pháp cứng [ví dụ: chỉ các nhà xác định theo nghĩa đen của chuỗi, chỉ được phép ở cấp cao nhất, tất cả các ràng buộc phải là định danh], cho phép các mô-đun được phân tích và liên kết tĩnh trước khi được đánh giá. Đây là chìa khóa để tạo ra các mô-đun không đồng bộ bởi tự nhiên, cung cấp năng lượng cho các tính năng như cấp cao đang chờ đợi.Có bốn hình thức khai báo
import { myExport } from "/modules/my-module.js";
7:- Nhập tên:
0// /modules/my-module.js const a = 1; export { a as "a-b" };
- Nhập mặc định:
1// /modules/my-module.js const a = 1; export { a as "a-b" };
- Nhập không gian tên:
2// /modules/my-module.js const a = 1; export { a as "a-b" };
- Nhập khẩu tác dụng phụ:
3// /modules/my-module.js const a = 1; export { a as "a-b" };
Dưới đây là các ví dụ để làm rõ cú pháp.
Nhập tên
Đưa ra một giá trị có tên
// /modules/my-module.js
const a = 1;
export { a as "a-b" };
4 đã được xuất từ mô -đun // /modules/my-module.js
const a = 1;
export { a as "a-b" };
5 một cách ngầm định là // /modules/my-module.js
const a = 1;
export { a as "a-b" };
6] hoặc bằng cách sử dụng câu lệnh // /modules/my-module.js
const a = 1;
export { a as "a-b" };
7, điều này chèn // /modules/my-module.js
const a = 1;
export { a as "a-b" };
4 vào phạm vi hiện tại.import { myExport } from "/modules/my-module.js";
Bạn có thể nhập nhiều tên từ cùng một mô -đun.
import { foo, bar } from "/modules/my-module.js";
Bạn có thể đổi tên xuất khẩu khi nhập nó. Ví dụ, điều này chèn
// /modules/my-module.js
const a = 1;
export { a as "a-b" };
9 vào phạm vi hiện tại.import { reallyReallyLongModuleExportName as shortName } from "/modules/my-module.js";
Một mô -đun cũng có thể xuất một thành viên dưới dạng chuỗi theo nghĩa đen không phải là định danh hợp lệ, trong trường hợp đó bạn phải bí danh để sử dụng nó trong mô -đun hiện tại.
// /modules/my-module.js
const a = 1;
export { a as "a-b" };
import { "a-b" as a } from "/modules/my-module.js";
Lưu ý:
0 không tương đương với import { "a-b" as a } from "/modules/my-module.js";
1 và sau đó phá hủy import { "a-b" as a } from "/modules/my-module.js";
2 và import { "a-b" as a } from "/modules/my-module.js";
3 từ import { "a-b" as a } from "/modules/my-module.js";
3. Nhập khẩu được đặt tên và mặc định là các cú pháp riêng biệt trong các mô -đun JavaScript. import { foo, bar } from "/modules/my-module.js";
import { "a-b" as a } from "/modules/my-module.js";
0 is not equivalent to import { "a-b" as a } from "/modules/my-module.js";
1 and then destructuring import { "a-b" as a } from "/modules/my-module.js";
2 and import { "a-b" as a } from "/modules/my-module.js";
3 from import { foo, bar } from "/modules/my-module.js";
3. Named and default imports are distinct syntaxes in JavaScript modules.Nhập mặc định
Xuất mặc định cần được nhập với cú pháp nhập mặc định tương ứng. Phiên bản đơn giản nhất nhập trực tiếp mặc định:
import myDefault from "/modules/my-module.js";
Vì xuất xuất mặc định không chỉ định rõ ràng một tên, bạn có thể cung cấp cho định danh bất kỳ tên nào bạn muốn.
Cũng có thể chỉ định nhập mặc định với nhập khẩu nhập khẩu hoặc nhập được đặt tên. Trong những trường hợp như vậy, việc nhập mặc định sẽ phải được khai báo trước. Ví dụ:
import myDefault, * as myModule from "/modules/my-module.js";
// myModule.default and myDefault point to the same binding
hoặc
import myDefault, { foo, bar } from "/modules/my-module.js";
Nhập tên gọi là
import { "a-b" as a } from "/modules/my-module.js";
5 có tác dụng tương tự như nhập mặc định. Nó là cần thiết để bí danh tên vì import { "a-b" as a } from "/modules/my-module.js";
5 là một từ dành riêng.import { default as myDefault } from "/modules/my-module.js";
Nhập khẩu không gian tên
Mã sau đây chèn
import { "a-b" as a } from "/modules/my-module.js";
7 vào phạm vi hiện tại, chứa tất cả các lần xuất từ mô -đun nằm ở import { "a-b" as a } from "/modules/my-module.js";
8.import { myExport } from "/modules/my-module.js";
0Ở đây,
import { "a-b" as a } from "/modules/my-module.js";
7 đại diện cho một đối tượng không gian tên chứa tất cả các xuất khẩu dưới dạng thuộc tính. Ví dụ: nếu mô -đun được nhập ở trên bao gồm xuất import myDefault from "/modules/my-module.js";
0, bạn sẽ gọi nó như thế này:import { myExport } from "/modules/my-module.js";
1import { "a-b" as a } from "/modules/my-module.js";
7 là một đối tượng niêm phong với nguyên mẫu import myDefault from "/modules/my-module.js";
2. Tất cả các khóa đều có thể phản cảm theo thứ tự từ vựng [nghĩa là hành vi mặc định của import myDefault from "/modules/my-module.js";
3], với xuất khẩu mặc định có sẵn dưới dạng khóa gọi là import { "a-b" as a } from "/modules/my-module.js";
5.Lưu ý: JavaScript không có nhập khẩu ký tự đại diện như
5, vì khả năng cao của xung đột tên. JavaScript does not have wildcard imports like import myDefault from "/modules/my-module.js";
import myDefault from "/modules/my-module.js";
5, because of the
high possibility of name conflicts.Nhập một mô -đun chỉ cho các tác dụng phụ của nó
Nhập toàn bộ mô -đun cho các tác dụng phụ, mà không cần nhập bất cứ thứ gì. Điều này chạy mã toàn cầu của mô -đun, nhưng không thực sự nhập bất kỳ giá trị nào.
import { myExport } from "/modules/my-module.js";
2Điều này thường được sử dụng cho polyfills, làm biến đổi các biến toàn cầu.
Ví dụ
Nhập khẩu tiêu chuẩn
Trong ví dụ này, chúng tôi tạo một mô-đun có thể sử dụng lại xuất khẩu một hàm để có được tất cả các số nguyên tố trong một phạm vi nhất định.
import { myExport } from "/modules/my-module.js";
3import { myExport } from "/modules/my-module.js";
4Giá trị được nhập chỉ có thể được sửa đổi bởi nhà xuất khẩu
Bộ định danh đang được nhập là một ràng buộc trực tiếp, bởi vì mô -đun xuất nó có thể làm thay đổi nó và giá trị nhập sẽ thay đổi. Tuy nhiên, mô-đun nhập nó không thể gán lại nó.
import { myExport } from "/modules/my-module.js";
5import { myExport } from "/modules/my-module.js";
6Thông số kỹ thuật
Thông số kỹ thuật ngôn ngữ Ecmascript # Sec-Imports # sec-imports |
Tính tương thích của trình duyệt web
Bảng BCD chỉ tải trong trình duyệt
Xem thêm
7// /modules/my-module.js const a = 1; export { a as "a-b" };
- Nhập khẩu động
7import myDefault from "/modules/my-module.js";
- Limin Zhu, Brian Terlson và Microsoft Edge Team: Xem trước các mô -đun ES6 và nhiều hơn nữa từ ES2015, ES2016 và hơn thế nữa
- Bài đăng trên blog của Hacks bởi Jason Orendorff: ES6 In DEPTH: MODULES
- Hacks Blog của Lin Clark: ES Mô-đun: Phim hoạt hình sâu
- Cuốn sách của Axel Rauschmayer: "Khám phá JS: Mô -đun"
- Hướng dẫn JavaScript hiện đại [JavaScript.info]: xuất khẩu và nhập khẩu