Javascript 模块介绍

模块是随着前端工作越来越复杂而产生，为了拆分代码便于开发重用，需要把代码分成更小的块，这样模块就产生了模块能使得前端开发工作便于开发维护，也便于重用和覆写。前端开发中管理模块的规范包括 CommonJs、AMD、CMD、ESM 等四个。

规范出现的大概时间

• CommonJs 2009
• AMD 2010
• CMD 2010
• ESM 2015

CommonJS

• 适用于 nodejs 的规范
• 用于服务端环境
• 一个文件就是一个模块
• require 和 module.exports 导入导出模块
• require 是同步执行的，是要等待脚本文件都加载完成才能执行
• 模块是动态解析的，只有运行时才能确定导出的内容

AMD（Asynchronous Module Define）

• requirejs 对应该规范
• 浏览器环境，也能在 node 环境
• 一个文件一个模块，但可以通过define + id 在一个文件中定义多个模块
• define 定义模块
• require 和 module.exports 导入导出模块
• require 同步执行，只是依赖前置执行
• 依赖的模块提前加载
• 模块是动态解析的，只有运行时才能确定导出的内容

CMD（Common Module Define）

• seajs 对应该规范
• 浏览器环境
• 一个文件一个模块，但可以通过define + id 在一个文件中定义多个模块
• define 定义模块
• require 和 module.exports 导入导出模块
• require 同步执行
• require.async 异步执行，可以用来异步加载模块
• module 模块的定义包括 id、uri、dependencies、exports
• 依赖的模块延后加载，需要时在加载，按书写顺序执行
• 模块是动态解析的，只有运行时才能确定导出的内容

ESM（ECMAScript Module）

• ES6 的模块定义规范
• 适用于浏览器和服务端
• 一个文件就是一个模块
• import 和 export 导入导出模块
• import() 方法用来异步加载模块
• 模块是静态解析的，编译阶段就可以知道导出的内容

seajs - requirejs 执行顺序对比

[ 对比图

]