模块化

模块化把代码拆成高内聚、低耦合的文件或单元,通过显式 导入 / 导出 暴露接口。与 作用域与闭包 中的「单文件 IIFE」相比,可维护性与静态分析能力更好。


ECMAScript Modules(ESM,推荐)

语言标准:import / export(见 ES6+)。

静态 import

import { foo } from './mod.js'
import mod from './default.js'
  • 提升:模块会先解析依赖图,先于内联代码执行(import 写在文件顶或中部不影响“先加载模块”的语义模型;仍建议风格上置顶)。
  • 严格模式:模块内默认严格模式。
  • 单例:同一 URL 被多次 import 只会执行一次模块顶层代码。

动态 import()

返回 Promise,用于按路由、按需加载(见 异步编程):

const { util } = await import('./util.js')

export 形式

  • 默认导出:每个模块至多一个 export default
  • 命名导出export constexport function 或尾部 export { a, b }
  • 导入时 默认与命名可混用,注意 as 别名与 重新导出 export * from './x'export { y } from './x'

CommonJS(CJS)与互操作

Node 历史栈常见 require / module.exports

  • 同步加载、运行时解析路径。
  • 与 ESM 混用时需留意 扩展名package.json"type"exports 字段及打包工具(Vite、webpack 等)的统一策略。

浏览器与路径

  • 原生 <script type="module">:HTTP(S) 加载,CORS、 MIME 类型需正确。
  • 路径:相对 / 绝对 URL;通常需 明确 .js 扩展名(依环境与构建工具而定)。

循环依赖

A 引 B、B 再引 A 时,可能出现某一侧在未完成初始化前被读undefined。根本解法是调整分层抽共享模块;临时可通过懒取值(函数内 require/import)缓解。


相关链接

  • ES6+(语法总览、动态 import 所在年代)
  • 异步编程import()Promise
  • 作用域与闭包(模块顶层作用域即「文件私有」)
  • 函数(树摇友好:多用具名导出、避免滥用副作用顶层)