你了解AMD与CMD么？

前端模块化

前端模块化的概念出现大概是因为js不具备像java的package功能吧，可以独立组织相关代码，避免变量污染，命名冲突的问题，并且如果引用某个需要点的话import就解决了。

于是js的我们有了模仿的模块化概念……
这让我想起了大学苏老师常说的“我们说功能化、模块化”，其实就是组织一个具有相关功能的方法并让它独立出来，这个方法因为功能性而带上了可复用性高的特性，因此所有有这个功能需求的地方都可以加载引入：

比如（举个栗子）：定义一个类dog，dog是一种通用的生物，具备 head，body，neck，tail，foot……每一个举出来的属性都算是dog这个类上独立的一个属性，可以直接在生物科这个模块化的大库中import到的并加载组成的。

起初前辈们的模块化概念探索使用了独立封装函数或定义对象的方法，但是都会受到js作用域或者变量污染的安全问题。

所以出现了通用的CommonJS和AMD。

CommonJS

CommonJS 只是一种规范，不提供默认实现，只要求一些诸如javascript库、环境去实现它的api定义；

CommonJS定义的模块分为:{模块引用(require)} {模块定义(exports)} {模块标识(module)},
require()引入外部模块；exports对象输出当前模块的方法或变量；module对象就代表模块本身。

Eg：nodejs的模块系统中引入需求依赖的形式：var a = require('a')

会发现：这种引入的方式是同步的，引入模块就调用内部的方法。但是这种形式在服务端来实现是没有问题的，如果在浏览器端调用就会因为加载顺序而不能直接在引入模块之后调用模块中的方法。

实现异步可以用script标签加载呀，但是脚本标签天生异步，如果这样，CommonJS的模块就不能正常使用。所以：

AMD（Asynchronous Module Definition）

官方
AMD其实是RequireJS的扩展推出的规范，RequireJS就是一种异步加载的方案，主要优点就是管理模块之间的依赖性，实现JS文件的异步加载，避免网页因为加载问题导致不能响应。

//使用之前全局加载requirejs文件 
<script type="text/javascript" src="require-2.1.16.js" data-main="main"></script>

require.config({
	paths : {
		jquery : 'jquery的地址文件'
	}
});
require([ 'jquery' ], function($) {
	alert("加载成功");
})

AMD的使用方式：

// 定义模块 moudle.js
define(['dependency'], function(){
    function xxx(){}
    return {
      xxx
    };
});

// 加载模块
require(['module'], function (some){
　 some.xxx();
});

以上：

define是一个全局变量，是RequireJS用来定义模块的。
define(id?, dependencies?, factory);
id：可选参数，定义模块的标识，若无，脚本文件名（去掉拓展名）
dependencies：数组类型，表示当前模块依赖的模块名称
factory：工厂方法，模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值 

require 函数加载模块:
require([dependencies], function(){});
参数1: 一个数组，表示所依赖的模块；
参数2: 一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，在函数内部可以使用这些模块。
require() 加载依赖的函数的时候是异步加载的，这样浏览器不会失去响应，它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。

CMD（Common Module Definition）

官方
CMD 浏览器的实现SeaJS，解决的问题同RequireJS如出一辙，只是实现的方法和使用时机不一样；

// 定价模块 module.js
define(function(require,exports,module){
  ...
});
require 相当于引入依赖，是一种获取其他模块的方式；
exports 是一个对象，用于输出结果；
module 是输出的对象本身，存储着当前模块本身的变量和方法；

// 加载模块
seajs.use(['module'],function(some){
  ...
});

AMD 与 CMD 的区别

AMD主打前置依赖，就是在所有的模块都加载完成之后，立马进入执行函数，就是说哪个模块加载完就执行相关的，但是主逻辑会在所有依赖模块都加载结束执行。
CMD主打就近依赖，就是在需求模块的时候选择加载依赖，这种方式是等加载全部完成之后，并不执行，只有遇到require函数才会执行之后的主逻辑。

两者都是通过异步实现的，只不过因为解析的时机不同，导致大家会以为CMD是同步的，AMD是异步的。
只不过CMD的加载时间可以忽略不计，因为按需加载的意味所以性能好一些，而AMD所有依赖加载完成再执行逻辑相对用户体验更佳。

参考：https://juejin.im/post/5a422b036fb9a045211ef789