现代前端推荐使用ES Modules，通过import和export实现静态依赖管理，配合合理目录结构与命名规范提升可维护性，注意浏览器与Node.js的运行差异。
JavaScript 的模块加载机制和代码组织规范是现代前端开发中的核心基础。随着项目规模扩大，良好的模块化设计能提升代码可维护性、复用性和协作效率。直接在全局作用域中写逻辑会导致变量污染、依赖混乱和难以测试的问题。因此，采用标准的模块系统来组织代码至关重要。
模块化的发展历程与现状
早期的 JavaScript 没有原生模块支持，开发者通过立即执行函数（IIFE）模拟私有作用域，或使用命名空间避免冲突。后来社区出现了多种模块规范：
- CommonJS：主要用于 Node.js 环境，采用 require 同步引入模块，module.exports 或 exports 导出内容
- AMD（Asynchronous Module Definition）：适用于浏览器环境，代表实现为 RequireJS，支持异步加载
- UMD（Universal Module Definition）：兼容 CommonJS 和 AMD 的通用模式，适应多种环境
- ES Modules (ESM)：ECMAScript 官方标准，使用 import 和 export 语法，现已被主流浏览器和 Node.js 支持
目前推荐统一使用 ES Modules 作为首选方案，它更贴近语言原生语义，并被构建工具如 Webpack、Vite、Rollup 原生支持。
ES Modules 基本用法
ESM 使用静态分析机制，在编译时确定依赖关系，这使得工具可以进行 tree-shaking 优化。
立即学习“Java免费学习笔记（深入）”；
- 导出方式：
- 命名导出：export const name = 'value';
- 默认导出：export default function() {}
- 批量导出：export { a, b } from './module';
- 导入方式：
- 导入命名成员：import { func } from './utils.js';
- 导入默认成员：import myFunc from './myModule.js';
- 整体导入：import * as utils from './utils.js';
注意：模块文件路径需包含扩展名（如 .js），特别是在浏览器环境中；Node.js 中可通过配置支持省略。
实际项目中的代码组织建议
合理的目录结构和模块划分能让团队协作更顺畅。
- 按功能划分模块，例如 /components、/services、/utils、/hooks（React）等
- 避免深层嵌套引用，尽量通过入口文件聚合对外暴露接口，比如在 index.js 中 re-export 子模块
- 保持模块职责单一，一个模块只做一件事
- 优先使用命名导出便于未来扩展，仅当模块明确只有一个主要输出时使用默认导出
- 利用 import.meta.url 获取当前模块路径，适用于动态资源定位
运行环境差异与处理策略
浏览器和 Node.js 对 ESM 的支持略有不同：
- 浏览器中需在 script 标签上加上 type="module" 才能启用 ESM
- Node.js 中需将文件后缀设为 .mjs 或在 package.json 中设置 "type": "module"
- 动态导入可用 import() 函数实现按需加载，适合路由级拆分
构建工具可以帮助抹平这些差异，但在不使用打包器的情况下，要注意路径解析、CORS 等限制。
基本上就这些。掌握模块机制并形成一致的组织规范，能让代码更清晰、更容易长期维护。
