JavaScript 模块
最后修改于 2023 年 10 月 18 日
在本教程中，我们将展示如何在 JavaScript 中创建和使用模块。
一个 模块 是 JavaScript 代码的容器。 模块在一个单独的文件中定义。 模块的目的是组织和隔离代码。
多年来，JavaScript 并没有模块系统。 因此，创建了一些第三方解决方案。 最受欢迎的是 CommonJS。 2015 年，发布了标准的 JS 模块系统。 2019 年，新的模块系统被移植到 Node.js。
模块的重要属性
- 模块默认是延迟加载的
- 模块处于严格模式
- 模块中的代码仅执行一次
- 模块有自己的、局部的顶级作用域
- 从另一个源加载外部脚本需要 CORS 标头
- 来自模块的代码使用
import/export加载
<script type="module" src="main.js"></script>
我们使用 type 属性在浏览器中启用模块。
{
...
"main": "main.js",
"type": "module",
...
}
在 Node.js 中，ES 模块系统通过 type 选项启用。
有一个约定是使用 .mjs 后缀表示模块。
Export/import 关键字
export 关键字标记变量和函数，以便从模块访问。 import 关键字从模块导入变量和函数。
export const name = 'John Doe'; -> import { name } from 'mymod.mjs';
这是基本名称导出。
export default name = 'John Doe'; -> import name from 'mymod.mjs';
这是默认导出语法。
export { name as username }; -> import { username } from 'mymod.mjs';
重命名导出语法。
export { import {
fname, fname,
lname as last_name; -> last_name
}; } from 'mymod.mjs';
这是列表导出语法。
浏览器中的 JS 模块示例
在下面的例子中，我们创建一个简单的模块。
<!DOCTYPE html>
<html>
<head>
<title>Drawing</title>
<script type="module" src="main.mjs"></script>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="board" width="550" height="550">
</canvas>
</body>
</html>
我们在画布上绘制。 绘图代码位于
import { drawLine, drawCircle } from './modules/draw.mjs';
let canvas = document.getElementById('board');
let ctx = canvas.getContext('2d');
drawLine(ctx);
drawCircle(ctx);
在 main.mjs 模块中，我们从 draw.mjs 模块导入 drawLine 和 drawCircle 函数。 我们获取 canvas 对象并创建一个绘图上下文。 最后，我们调用导入的函数。
export function drawLine(ctx) {
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(250, 250);
ctx.lineWidth = 3;
ctx.stroke();
}
export function drawCircle(ctx) {
ctx.beginPath();
ctx.arc(250, 90, 80, 0, 2*Math.PI);
ctx.fill();
}
我们有两个函数的定义。 它们都带有 export 关键字前缀，这使它们可以在另一个模块中被导入。
Node.js 中的 JS 模块示例
在下一个示例中，我们在 Node.js 中设置一个模块。
{
...
"main": "main.js",
"type": "module",
...
"license": "ISC"
}
在 package.json 文件中，我们使用 type 选项设置模块类型。
const fname = 'John';
const lname = 'Doe';
const occupation = 'gardener';
function say_message() {
console.log(`${fname} ${lname} is a ${occupation}`);
}
export {
fname as first_name,
lname as last_name,
say_message
}
在 core.mjs 模块中，我们定义了两个常量和一个函数。 我们使用导出列表语法导出两个常量和一个函数。 我们重命名这两个常量。
import { first_name, last_name, say_message } from "./modules/core.mjs";
console.log(first_name);
console.log(last_name);
say_message();
在 main.js 程序中，我们导入导出的值并在代码中使用它们。
$ node main.js John Doe John Doe is a gardener
来源
在本文中，我们使用了 JavaScript 中的模块。