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"：

• Node.js 中需把 "type": "module" 加进 package.json，或用 .mjs 后缀
• 暂不支持直接 import HTTP 地址（除非用 CDN 提供的 ESM 兼容链接）
• 循环引用会发生，但模块会返回已执行部分的 exports 对象（不是报错）

简单示例：跑起来试试

建两个文件：

// greet.js
export function hello(name) {
  return `Hi, ${name}!`;
}
export default function bye() {
  return 'See you later!';
}

// index.js
import goodbye, { hello } from './greet.js';
console.log(hello('Alice')); // Hi, Alice!
console.log(goodbye());      // See you later!

在 HTML 中引入：，打开控制台就能看到结果。

基本上就这些。不复杂但容易忽略细节，比如路径、后缀、script 类型——对了，别忘了浏览器控制台报错时先看是不是漏了 type="module"。