JavaScript模块是什么？如何使用import和export

在IT行业这个发展更新速度很快的行业，只有不停止的学习，才不会被行业所淘汰。如果你是文章学习者，那么本文《JavaScript模块是什么？如何用import和export？》就很适合你！本篇内容主要包括##content_title##，希望对大家的知识积累有所帮助，助力实战开发！

JavaScript模块通过export/import实现代码封装与复用，具独立作用域、严格模式、单次执行等特性；支持命名导出、默认导出及对应导入方式，需模块环境运行。

JavaScript模块是一套组织代码的方式，让变量、函数、类等只在需要的地方暴露，避免全局污染和命名冲突。ES6（ECMAScript 2015）正式引入 export 和 import 语法，成为现代前端开发的标准模块机制。

模块的基本特点

每个模块拥有独立的作用域，顶层声明的变量不会自动挂到全局；模块默认是严格模式；模块代码只执行一次，多次导入也只初始化一次（有缓存）。

如何用 export 暴露内容

一个模块可以导出多个东西，方式有两种：

• 命名导出（named export）：用 export 关键字修饰声明，可导出多个，名字必须与定义一致。
  ✅ 正确示例：
  export const PI = 3.14;
export function add(a, b) { return a + b; }
export class Calculator { ... }
• 默认导出（default export）：每个模块最多一个，导入时可自定义名称，更灵活。
  ✅ 正确示例：
  export default function greet(name) { return `Hello, ${name}`; }

如何用 import 导入内容

导入方式需与导出方式匹配：

• 导入命名导出：用大括号 {}，名字必须完全一致（可重命名用 as）
  import { PI, add } from './math.js';
import { add as sum } from './math.js';
• 导入默认导出：不加花括号，可任意起名
  import greet from './greeting.js';
• 同时导入默认 + 命名：用 import defaultExport, { namedExport } from '...'
import calc, { PI } from './calculator.js';
• 整体导入（namespace import）：把所有导出作为对象属性导入
  import * as utils from './utils.js'; // utils.PI, utils.add

使用注意和常见场景

模块语法只在模块环境生效，脚本需显式声明 type="module"：

Node.js 中需文件后缀为 .mjs 或 package.json 中设置 "type": "module"。

不能在非模块脚本中直接用 import/export；动态导入可用 import('./module.js') 返回 Promise，适合按需加载。

基本上就这些。掌握 export/import 的组合方式，就能清晰拆分逻辑、复用代码、管理依赖。

本篇关于《JavaScript模块是什么？如何使用import和export》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！