在本教程中，我们展示了如何在 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 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 模块中，我们从drawLine 模块导入drawCircle 和draw.mjs 函数。我们获取画布对象并创建绘图上下文。最后，我们调用导入的函数。
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 中的模块。
列出所有 JavaScript 教程。
