17370845950

JavaScript模块化通过export和import实现代码拆分与依赖管理，支持命名导出、默认导出及混合导入，需注意顶层导入、路径规范、环境配置（如type="module"）及常见误区。

JavaScript 的模块化，就是把代码拆成独立、可复用的文件（模块），每个模块封装自己的变量、函数或类，不污染全局作用域，还能按需加载和依赖管理。现代浏览器和 Node.js（v14+）都原生支持 ES 模块（ESM），核心就是 export 和 import。

export：怎么对外暴露内容？

一个模块可以导出多个东西，方式灵活：

• 命名导出（named export）：用 export 关键字逐个导出，名字必须一致才能导入。适合导出多个值。

math.js

export const PI = 3.14159;
export function add(a, b) {
  return a + b;
}
export class Calculator {
  multiply(x, y) { return x * y; }
}

• 默认导出（default export）：每个模块最多一个，导入时可自定义名称，适合“主功能”或单例。

utils.js

export default function debounce(fn, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

• 统一导出 / 重命名导出：用 export { ... } 批量导出，支持别名（as）。

const name = "Alice";
const age = 30;
export { name as userName, age };

import：怎么引入其他模块？

导入必须在模块顶层（不能在 if 或函数里），且路径要带扩展名（如 .js）或以 /、./、../ 开头：

• 导入命名导出：用大括号，名字必须和导出一致（或用 as 重命名）。

import { PI, add, Calculator } from './math.js';
import { userName as myName, age } from './user.js';

• 导入默认导出：不用大括号，可任意起名。

import debounce from './utils.js'; // ✅ 正确
import { default as debounce } from './utils.js'; // ❌ 不必要

• 混合导入：默认 + 命名，顺序不限，但默认必须在前（语法要求）。

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

• 只执行不导入：用于运行副作用（如初始化、打补丁），不取值。

import './polyfill.js';

实际使用要注意什么？

模块不是开箱即用，得看环境：

• 浏览器中：HTML 脚本标签要加 type="module"，否则 import/export 会报错。

• Node.js 中：文件后缀为 .mjs，或 package.json 里写 "type": "module"。
• 路径必须明确：不能写 import { add } from 'math'（没扩展名、没相对/绝对路径），会报错；应写 from './math.js'。
• 不能动态 import 变量：import(url) 是异步函数，但 url 不能是拼接的变量（打包工具限制），常用于按需加载。

if (condition) {
  const module = await import('./feature.js'); // ✅ 动态导入
  module.doSomething();
}

常见误区提醒

容易踩坑的地方：

• export 后不能跟 var/let/const 声明语句（语法错误），要分开写或直接导出表达式。
• import 必须在顶层，不能放在 if、for 或函数内（静态分析需要）。
• 模块是单例：多次 import 同一模块，只会执行一次，所有导入共享同一份导出值（包括对象引用）。
• 循环导入（A 导入 B，B 又导入 A）不会报错，但未执行完的模块会返回空对象，需注意初始化顺序。

基本上就这些。模块化让代码更清晰、可维护、易测试，import/export 是基础，用熟了自然就顺了。