什么是JavaScript模块_如何导入和导出模块功能？

JavaScript模块是ES6起原生支持的代码组织方式，通过export导出（命名/默认）和import导入实现作用域隔离与复用，需配合type="module"或.mjs后缀使用，且import/export仅限顶层。

JavaScript模块是将代码组织成独立、可复用单元的方式，每个模块拥有自己的作用域，不会污染全局命名空间。从ES6（ECMAScript 2015）开始，原生支持import和export语法，成为现代前端开发的标准实践。

模块的基本导出方式

一个模块通过export向外提供变量、函数、类或对象。可以使用命名导出（named export）或默认导出（default export）：

• 命名导出：可导出多个值，导入时必须使用对应名称
  ✅ 正确写法：
  export const PI = 3.14159;
export function add(a, b) { return a + b; }
export class Calculator { ... }
• 默认导出：每个模块最多一个，默认导出不需要名称，导入时可自定义名称
  ✅ 正确写法：
  export default function greet(name) { return `Hello, ${name}`; }
  或 export default class App { ... }

模块的导入方式

使用import语句加载其他模块的功能，导入语法需与导出方式匹配：

• 导入命名导出：用大括号指定名称
  import { PI, add, Calculator } from './math.js';
  也可重命名：import { add as sum } from './math.js';
• 导入默认导出：不加花括号，名称可任意取
  import greet from './greeting.js';
  （注意：这里greet不是固定名，可写成import hello from './greeting.js'）
• 同时导入默认和命名导出：
  import greet, { PI, add } from './utils.js';
• 整体导入（namespace import）：把所有导出挂载到一个对象上
  import * as utils from './utils.js';
  使用：utils.PI、utils.add(2, 3)

模块使用的注意事项

模块系统依赖严格的语法和环境支持：

标签： javascript es6 java html js 前端 node.js json node vite 浏览器 ap