前端模块化
2018年11月26日
前端模块规范主要有三种：CommonJs、AMD和CMD。
CommonJs主要用于服务器环境。
AMD和CMD主要用于浏览器环境。
CommonJs
CommonJs是服务端模块的规范，由Node推广使用。
根据CommonJs规范：
- 一个单独文件就是一个模块。
- 通过module.exports变量输出模块变量。
- 使用require方法加载一个模块，读取一个模块文件并执行，返回模块文件的module.exports对象。
require方法是同步的，需要同步读取模块文件中的内容，编译执行以得到模块接口方法。这在服务端node环境中是没有问题的，但在浏览器端却会存在问题。
浏览器中通常通过在document添加<script>标签添加脚本。脚本标签本身就是异步的，所以CommonJs模块在浏览器环境中会出现问题。
所以就有了AMD、CMD两种模块加载规范。
AMD
AMD是“Asynchronous Module Definition”的缩写。
它采用异步方式加载模块，模块的加载不影响后面代码的运行。所有依赖这个模块的语句都定义在一个回调函数中，等待模块加载完成后，才会执行后面的回调函数。
CMD
CMD是“Common Module Definition”通用模块定义的缩写。
CMD规范中，一个模块就是一个文件，格式如下：1
2
3define(function(require, exports, module) {
// 模块代码
})
require是一个可以把其他模块导入进来的参数。
exports是一个可以把模块内属性、方法导出的参数。
module是一个对象，上面存储了当前模块的方法和属性。