模块(Modules)
JavaScript 模块允许您将代码分解成单独的文件。
这会使维护代码库更加容易。
模块是使用 import
语句从外部文件导入的。
模块还依赖于 <script> 标签中的 type="module"
。
实例
<!DOCTYPE html>
<html lang="en">
<body>
<p id="demo"></p>
<script type="module">
import message from "/demo/js/message.js";
document.getElementById("demo").innerHTML=message();
</script>
</body>
</html>
导出
带有函数 或变量的模块可以存储在任何外部文件中。
导出有两种类型:命名导出 和默认导出。
命名导出(Named Exports)
让我们创建一个名为 person.js 的文件,并在其中填充我们要导出的内容。
您可以通过两种方式创建命名导出。一种是逐个内联创建,另一种是在文件底部一次性全部创建。
逐个内联创建:person.js
export const name = "Bill";
export const age = 19;
在文件底部一次性创建:
person.js
const name = "Bill";
const age = 19;
export {name, age};
默认导出(Default Exports)
让我们创建另一个名为 message.js 的文件,并用其演示默认导出。
一个文件中只能有一个默认导出。
实例
message.js
const message = () => {
const name = "Bill";
const age = 19;
return name + ' is ' + age + 'years old.';
};
export default message;
两种方式将模块导入到文件中,具体取决于它们是命名导出还是默认导出。
命名导出是使用大括号构造的。默认导出不是。
从命名导出中导入
从文件 person.js 导入命名导出:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 模块</h1>
<p id="demo"></p>
<script type="module">
import { name, age } from "/demo/js/person.js";
let text = "My name is " + name + ", I am " + age + ".";
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
从默认导出导入
从文件 message.js 导入默认导出:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 模块</h1>
<p id="demo"></p>
<script type="module">
import message from "/demo/js/message.js";
document.getElementById("demo").innerHTML = message();
</script>
</body>
</html>
注意
模块仅适用于 HTTP(s) 协议。
通过 file:// 协议打开的网页无法使用导入/导出。