JavaScript模块是什么？如何使用？

本篇文章向大家介绍《JavaScript模块是什么？如何导入导出？》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

JavaScript模块是封装变量、函数或类的独立代码单元，ES6引入export/import语法，具备作用域隔离、显式导出导入、路径静态等特性，支持命名导出、默认导出及混合导入方式。

JavaScript模块是一段可独立运行、封装了变量、函数或类的代码，它能避免全局污染，支持按需加载和复用。ES6（ECMAScript 2015）正式引入了export和import语法，成为现代前端开发的标准模块机制。

模块的基本特征

每个模块拥有自己的作用域，内部声明的变量、函数默认不会暴露到全局；必须显式导出才能被其他模块使用；导入时也必须明确指定来源，不支持运行时动态路径（除非用import()动态导入）。

如何导出（export）

导出有三种常见方式，适用于不同场景：

• 命名导出（Named Export）：一个模块可导出多个值，用花括号接收，名称必须一致。
  例如：
  export const PI = 3.14;
export function add(a, b) { return a + b; }
export class Calculator { ... }
• 默认导出（Default Export）：每个模块最多一个，默认导出不要求名称匹配，导入时可自定义名字。
  export default function greet() { return 'Hello'; }
  或export default class App { ... }
• 统一导出与重命名：
  export { add as sum, PI as pi };
  也可结合默认导出：export { add, PI }; export default greet;

如何导入（import）

导入方式需与导出方式对应：

• 导入命名导出：用花括号，名称必须与导出一致（可重命名）
  import { add, PI } from './math.js';
import { add as sum } from './math.js';
• 导入默认导出：不用花括号，可任意命名
  import greet from './utils.js';
import MyGreeting from './utils.js';
• 同时导入默认和命名导出：
  import greet, { add, PI } from './math.js';
• 导入整个模块为一个对象（命名空间导入）：
  import * as math from './math.js';
  之后通过math.add(1, 2)或math.PI访问

注意事项与常见问题

模块语法只在模块环境生效（