javascript模块化是什么_如何使用import和export？

JavaScript模块化通过export导出、import导入实现代码拆分与复用，支持命名导出（需大括号匹配名）和默认导出（可自定义名），须注意静态语法、路径完整、浏览器需type="module"等规则。

JavaScript模块化是把代码拆分成独立、可复用的文件，每个文件封装自己的功能和作用域，避免全局污染和命名冲突。核心机制就是 export 输出内容，import 引入使用。

export：暴露变量、函数或类

一个模块里可以多次用 export 导出多个东西，也可以用 export default 指定默认导出（每个模块最多一个）。

• 命名导出（named export）：导出时带名字，导入时必须用对应名字（可重命名）

// math.js
export const PI = 3.14;
export function add(a, b) {
  return a + b;
}
export class Calculator {
  multiply(x, y) { return x * y; }
}

登录后复制

• 默认导出（default export）：导出时不加名字，导入时可自定义任意名字

// utils.js
export default function formatDate(date) {
  return date.toISOString().split('T')[0];
}

登录后复制

import：在其他文件中加载模块

根据导出方式不同，导入语法也不同。注意路径必须写全（如 ./math.js），浏览器中需加 type="module" 才能启用 ES 模块。

• 导入命名导出：用大括号 {}，名字要匹配（或用 as 重命名）

// main.js
import { PI, add, Calculator } from './math.js';
import { add as sum } from './math.js'; // 重命名

登录后复制

• 导入默认导出：不加大括号，名字随意

import formatDate from './utils.js';
import myFormat from './utils.js'; // 也可以叫 myFormat

登录后复制

• 混合导入：默认 + 命名一起导入

import formatDate, { PI, add } from './math.js';

登录后复制

常见注意事项

ES 模块是静态的，import/export 必须写在顶层，不能放在 if 或函数里；路径是相对或绝对 URL，不支持 Node.js 的自动扩展（如 .js 后缀不能省）；浏览器中 script 标签要加 type="module"：

立即学习“Java免费学习笔记（深入）”；

标签： javascript java html js node.js json node go 浏览器 ai cdn 作用域