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