信息发布→ 登录 注册 退出

什么是JavaScript模块以及如何导出导入?

发布时间:2025-12-18

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

JavaScript模块是一段独立的、可复用的代码单元,它封装变量、函数或类,并能明确声明哪些内容对外可用(导出)、哪些仅内部使用(私有)。模块之间通过导入导出机制通信,避免全局污染,提升代码组织性和维护性。

模块的基本形式:ES6 模块(推荐)

现代 JavaScript 使用 exportimport 语法,需在 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 对象)
  • 注意:exportsmodule.exports 的引用,直接赋值 exports = {...} 会断开连接,应始终用 module.exports 赋值

模块路径与文件后缀

导入语句中的路径必须明确:

  • 相对路径需带前缀:./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 模块写法。

标签:# javascript  # es6  # java  # html  # js  # node.js  # node  # vite  # 浏览器  # 工具  # 懒加载  # ai  
在线客服
服务热线

服务热线

4008888355

微信咨询
二维码
返回顶部
×二维码

截屏,微信识别二维码

打开微信

微信号已复制,请打开微信添加咨询详情!