JavaScript模块化通过import和export实现封装复用，每个文件为独立作用域模块；支持命名导出、默认导出及统一导出对象；导入需匹配导出方式，注意路径、作用域与执行时机；建议按功能职责组织模块，用index.js聚合入口，并规避循环依赖等陷阱。
JavaScript模块化通过 import 和 export 实现代码的封装与复用，核心是让每个文件成为独立作用域的模块，只显式暴露需要对外提供的变量、函数或类。
export：决定什么可以被其他模块使用
一个模块可以通过多种方式导出内容，关键在于“明确性”和“一致性”：
- 命名导出（named export）：适合导出多个值，如工具函数、配置对象。每个导出项需有名字，可重命名导入时使用。
export const add = (a, b) => a + b; export const subtract = (a, b) => a - b; export const VERSION = '1.0.0';
- 默认导出（default export）：每个模块最多一个，默认导出没有名字限制，导入时可自定义名称，常用于组件、主类或单入口逻辑。
export default class Button {
render() { return '<button>Click</button>'; }
}
- 统一导出对象：便于集中管理，也利于按需引入（配合打包工具摇树优化）。
export { add, subtract, VERSION } from './utils.js';
export { default as Button } from './Button.js';
import：按需加载并使用其他模块的内容
导入方式要和导出方式匹配，同时注意路径写法和执行时机：
- 导入命名导出需用大括号，名字必须一致（或用
as重命名）：
import { add, VERSION as ver } from './utils.js';
console.log(add(2, 3), ver); // 5, '1.0.0'
- 导入默认导出不用大括号，名字可任意：
import MyButton from './Button.js'; // 或 import Button from './Button.js';
- 混合导入支持同时引入默认 + 命名项：
import Button, { add, VERSION } from './index.js';
- 仅执行模块（不导入任何值）适用于副作用逻辑，如全局样式注入、polyfill 加载：
import './polyfills.js'; import 'normalize.css';
模块组织建议：清晰、可维护、易协作
实际项目中，模块结构不是越细越好，而是围绕功能边界和复用意图来设计：
立即学习“Java免费学习笔记（深入）”；
-
一个文件一个主要职责：比如
api.js封装请求逻辑，storage.js管理本地存储，避免把网络、缓存、校验混在一个文件里。 -
优先用默认导出暴露主接口：如 React 组件、Vue 插件、工具库主类，方便使用者直觉调用；命名导出作为补充能力（如
useDebounce,formatDate）。 -
用
index.js做聚合入口：在目录下统一 re-export，简化外部导入路径，也便于后期重构内部结构而不影响调用方。
export { default as useState } from './useState.js';
export { default as useEffect } from './useEffect.js';
export { useDebounce } from './useDebounce.js';
外部只需：import { useState, useDebounce } from './hooks';
注意事项：避免常见陷阱
模块化看似简单，但几个细节容易引发问题：
-
import必须在顶层作用域，不能放在 if 或函数内（动态导入用import()函数）。 - ES 模块是静态分析的，导入路径必须是字符串字面量，不能拼接变量。
- 循环依赖存在时，模块会返回当前已执行部分的导出对象（可能是未完成状态），应尽量避免。
- 浏览器中使用
type="module"才能启用 ES 模块语法，Node.js 需要.mjs后缀或"type": "module"字段。
