JavaScript模块是独立可复用的代码单元,通过export/import实现封装与通信;ES6模块为现代标准,支持命名导出、默认导出及动态导入;CommonJS仅适用于旧版Node.js环境。

JavaScript模块是一段独立的、可复用的代码单元,它封装变量、函数或类,并能明确声明哪些内容对外可用(导出)、哪些仅内部使用(私有)。模块之间通过导入导出机制通信,避免全局污染,提升代码组织性和维护性。
模块的基本形式:ES6 模块(推荐)
现代 JavaScript 使用 export 和 import 语法,需在 HTML 中以 type="module" 加载,或在打包工具(如 Vite、Webpack)中默认启用。
-
导出方式:
• 命名导出(可多个):export const name = "Alice"; export function greet() { ... }
• 默认导出(每个模块最多一个):export default function() { ... }或export default class User { ... } -
导入方式:
• 导入命名导出:import { name, greet } from './utils.js';
• 导入默认导出:import myFunc from './main.js';(无需大括号)
• 混合导入:import myDefault, { name, greet } from './module.js';
• 全部导入(不常用):import * as utils from './utils.js';→ 用utils.name访问
CommonJS 模块(Node.js 早期常用)
在 Node.js 环境(尤其是未启用 ES 模块时)使用 require() 和 module.exports。语法不同,不能直接在浏览器原生脚本中运行(除非打包)。
-
导出:
module.exports = { name: "Bob", sayHi() { ... } };或exports.sayHi = function() { ... }; -
导入:
const utils = require('./utils.js');(返回整个module.exports对象) - 注意:
exports是module.exports的引用,直接赋值exports = {...}会断开连接,应始终用module.exports赋值
模块路径与文件后缀
导入语句中的路径必须明确:
Vuex是一个专门为Vue.js应用设计的状态管理模型 + 库。它为应用内的所有组件提供集中式存储服务,其中的规则确保状态只能按预期方式变更。它可以与 Vue 官方开发工具扩展(devtools extension) 集成,提供高级特征,比如 零配置时空旅行般(基于时间轴)调试,以及状态快照 导出/导入。本文给大家带来Vuex参考手册,需要的朋友们可以过来看看!
立即学习“Java免费学习笔记(深入)”;
- 相对路径需带前缀:
./utils.js或../lib/helper.js(.js后缀在 ES 模块中通常不可省略) - 不能省略
./或../,否则会被当作内置模块或包名(如import fs from 'fs') - Node.js 14+ 支持
"type": "module"字段,让.js文件按 ES 模块解析;否则默认为 CommonJS
动态导入:按需加载模块
import() 是一个返回 Promise 的函数,用于条件加载、路由懒加载等场景:
if (needMath) { const math = await import('./math.js'); math.add(2, 3); }- 支持在任何位置使用(包括函数内、条件分支),不局限于顶层
- 常用于优化首屏加载,比如只在用户点击按钮后才加载图表模块
基本上就这些。ES6 的 import/export 是当前标准,CommonJS 主要在老 Node 项目或特定工具链中出现。选哪种取决于环境和构建配置,但新项目建议统一用 ES 模块写法。









