JavaScript 模块

js/module2026-08-24 19:46:25

JavaScript 模块化 将 JavaScript 程序拆分为可按需导入的单独模块。

Node.js 已经提供这个能力很长时间了(CommonJS),还有很多的 JavaScript 库和框架已经开始了模块的使用(AMD 和 CMD 等)。最新的浏览器开始原生支持模块功能(ES6 Module)。

模块

Node.js 应用由模块组成,每个文件就是一个模块,有自己的作用域。在一个文件里面定义的变量、函数、类,都是私有的,对其他文件不可见。

模块化解决了全局变量污染、数据保护的问题,还很好的解决了模块之间依赖关系的维护。

JavaScript 模块化规范

目前流行的 JS 模块化规范有 ES6 模块系统、CommonJS、AMD、CMD。

  • CommonJS (CommonJS 模块系统)
  • AMD (Asynchronous Module Definition, 异步模块定义)
  • CMD (Common Module Definition, 通用模块定义)
  • ES6 Module (ES6 模块系统, ECMAScript 模块)

ES6 Module 和 CommonJS 的区别

CommonJS 只能在运行时确定导出的接口,实际导出的就是一个对象。CommonJS 适用于加载本地模块,是一个同步加载的过程,比如 Node.js 中加载模块其实是一个读取本地文件并执行的同步过程,而在浏览器中要获取资源通常是需要异步请求获取的,不适合频繁在运行中不断请求新的资源。

而 ES6 Module 的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及导入和导出的变量,也就是所谓的"编译时加载"。正因为如此,import 命令具有提升效果,会提升到整个模块的头部,首先执行。

参考资料

指南:JavaScript 模块
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Modules

CommonJS
https://segmentfault.com/a/1190000023141998

本页目录