17370845950

JavaScript模块化通过import和export实现代码拆分、复用与作用域隔离，核心是按需导出引入以避免全局污染；支持命名导出（多个，名字需一致）、默认导出（每个模块至多一个，导入名可自定义）及混合导入；import/export必须在顶层，浏览器需script加type="module"，Node.js需.mjs或package.json设"type": "module"。

JavaScript模块化通过import和export实现代码的拆分、复用与作用域隔离，核心是把功能按需导出、按需引入，避免全局污染和依赖混乱。

export：怎么把东西“亮出来”？

一个模块（.js文件）默认不对外暴露任何内容，必须显式用export声明哪些变量、函数或类可以被其他模块使用。

• 命名导出（Named Export）：可导出多个，名字必须和导入时一致
  math.js
  

  export const PI = 3.14;
  export function add(a, b) { return a + b; }
  export class Calculator { ... }

• 默认导出（Default Export）：每个模块最多一个，导入时可自定义名字
  utils.js
  export default function debounce(fn, delay) { ... }
• 混合导出也允许，但默认导出不能用export default const x = 1这种写法，得先声明再导出，或用export default后接表达式

import：怎么把东西“拿进来”？

导入语法要和导出方式匹配，路径必须是相对或绝对的（如./math.js），不能是纯模块名（Node.js里除外，需配置）。

• 导入命名导出：用大括号，名字必须完全一致
  import { PI, add, Calculator } from './math.js';
• 导入默认导出：不用大括号，名字任意
  

  import debounce from './utils.js'; // ✅
  import myDebounce from './utils.js'; // ✅ 也可以

• 同时导入默认 + 命名：
  import debounce, { PI, add } from './mathAndUtils.js';
• 整体导入（namespace import）：把所有命名导出挂在一个对象下
  

  import * as math from './math.js';
  console.log(math.PI, math.add(2, 3));

常见注意事项

• import和export只能出现在模块顶层，不能在if或函数里——它们是编译时静态解析的
• 浏览器中使用模块，标签必须加type="module"，否则会报错
  
• Node.js默认不支持ES模块，需把文件后缀改为.mjs，或在package.json中设置"type": "module"
• 路径别名（如@/components）不是原生支持的，需要构建工具（Vite、Webpack等）配置别名解析

一个最小可运行例子

utils.js

export function greet(name) { return `Hello, ${name}`; }
export default function log(msg) { console.log('[LOG]', msg); }

main.js

import log, { greet } from './utils.js';
log(greet('Alice'));

在HTML中引入：

基本上就这些。不复杂但容易忽略细节，比如路径写错、大小写不一致、漏掉type="module"——跑不通时优先检查这几处。