在本教程中,我们展示了如何在 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 教程。