javascript模块是什么_如何导入导出-js教程-PHP中文网

javascript模块是封装变量、函数或类的独立代码单元，通过import/export机制交互，避免全局污染；默认严格模式，有独立作用域，仅执行一次；支持命名导出/导入、默认导出/导入、混合导入及整体导入；浏览器需type="module"，node.js需.mjs或"type":"module"。

javascript模块是什么_如何导入导出

JavaScript模块是一段可独立运行、封装了变量、函数或类的代码单元，它通过明确的导入（import）和导出（export）机制与其他代码交互，避免全局污染，提升复用性和可维护性。

模块的基本特征

模块默认是严格模式，顶层的 this 是 undefined；每个模块拥有自己的作用域，变量不会自动挂到全局；模块只执行一次，多次导入仍共享同一份实例。

如何导出（export）

导出有命名导出和默认导出两种方式，可混合使用：

Revealjs Presentations

创建、编辑并部署 reveal.js 演示文稿为单个 HTML 文件，可选自定义 CSS。适用于需要制作演示文稿、幻灯片或宣传材料时使用。

下载

命名导出：一个模块可导出多个值，需用原名或重命名导入
export const PI = 3.14;
export function add(a, b) { return a + b; }
export { add as sum }; // 重命名导出
默认导出：每个模块最多一个，导入时可自定义名称，无需花括号
export default function greet() { return 'Hello'; }
export default class User { ... }

如何导入（import）

导入必须在模块顶层（不能在条件或函数内），常见写法如下：

导入命名导出：用大括号，名称需与导出一致（可重命名）
import { PI, add } from './math.js';
import { add as sum } from './math.js';
导入默认导出：不加花括号，名字任意
import greet from './utils.js';
import MyUser from './user.js';
同时导入默认 + 命名：默认放前面，命名放花括号里
import greet, { PI, add } from './math.js';
整体导入（namespace）：把所有导出挂载为对象属性
import * as math from './math.js';
console.log(math.PI, math.add(2, 3));

模块加载注意点

浏览器中使用模块需加 type="module"：
<script type="module" src="main.js"></script>
Node.js 中需将文件后缀设为 .mjs 或在 package.json 中设置 "type": "module"。动态导入可用 import('./module.js') 返回 Promise，适合按需加载。

基本上就这些。模块不是语法糖，而是 JavaScript 官方标准的组织方式，用对了能让项目结构更清晰、协作更顺畅。