JavaScript 模块
模块
JavaScript 模块允许您将代码分解成单独的文件。
这使得代码库更容易维护。
模块使用 import
语句从外部文件导入。
模块还依赖于 type="module"
在 <script> 标签中。
导出
具有 **函数** 或 **变量** 的模块可以存储在任何外部文件中。
有两种类型的导出:**命名导出** 和 **默认导出**。
命名导出
让我们创建一个名为 person.js
的文件,并用我们想要导出的内容填充它。
您可以通过两种方式创建命名导出。分别内联,或在底部一次全部导出。
分别内联
person.js
export const name = "Jesse";
export const age = 40;
一次全部导出
person.js
const name = "Jesse";
const age = 40;
export {name, age};
默认导出
让我们创建另一个名为 message.js
的文件,并用它来演示默认导出。
您在一个文件中只能有一个默认导出。
示例
message.js
const message = () => {
const name = "Jesse";
const age = 40;
return name + ' is ' + age + 'years old.';
};
export default message;
导入
您可以通过两种方式将模块导入文件,这取决于它们是命名导出还是默认导出。
命名导出使用花括号构造。默认导出则不使用。
注意
模块仅适用于 HTTP(s) 协议。
通过 file:// 协议打开的网页无法使用 import / export。