#引言

由于Javascript的标准没有对模块的规范进行定义，人们又定义了一系列不同的模块定义： CommonJS 、 AMD 、 CMD 、 UMD。所幸的是ES6 Module的出现可能中止这种分裂的状态。

CommonJS

主要是用于服务器端的规范，比如目前的nodeJS

$ npm install react react-bootstrap

var Alert = require(‘react-bootstrap/lib/Alert’);
// or
var Alert = require(‘react-bootstrap’).Alert;

CommonJS 加载模块是同步的.所以只有加载完成才能执行后面的操作。

像Node.js主要用于服务器的编程，加载的模块文件一般都已经存在本地硬盘，所以加载起来比较快，不用考虑异步加载的方式，所以CommonJS规范比较适用。

但如果是浏览器环境，要从服务器加载模块，这是就必须采用异步模式。所以就有了 AMD CMD 等解决方案

AMD (Asynchromous Module Definition)

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出

AMD异步加载模块。它的模块支持对象 函数 构造器 字符串 JSON等各种类型的模块。

适用AMD规范适用define方法定义模块。

$ bower install react react-bootstrap

define([‘react-bootstrap’], function(ReactBootstrap) { var Alert = ReactBootstrap.Alert; … });
AMD 运行时核心思想是「Early Executing」，也就是提前执行依赖。

CMD (Common Module Definition)

通用模块定义,
CMD是SeaJS 在推广过程中对模块定义的规范化产出
CMD和AMD的区别有以下几点：

1.对于依赖的模块AMD是提前执行，CMD是延迟执行。

2.CMD推崇依赖就近，按需加载；AMD推崇依赖前置。

UMD

umd是AMD和CommonJS的糅合

AMD 浏览器第一的原则发展 异步加载模块。

CommonJS 模块以服务器第一原则发展，选择同步加载，它的模块无需包装(unwrapped modules)。

这迫使人们又想出另一个更通用的模式UMD （Universal Module Definition）。希望解决跨平台的解决方案。

UMD先判断是否支持Node.js的模块（exports）是否存在，存在则使用Node.js模块模式。

在判断是否支持AMD（define是否存在），存在则使用AMD方式加载模块。

(function (window, factory) {
    if (typeof exports === 'object') {

        module.exports = factory();
    } else if (typeof define === 'function' && define.amd) {

        define(factory);
    } else {

        window.eventUtil = factory();
    }
})(this, function () {
    //module ...
});

ES6

es6 中新增了两个命令 export 和 import , export 命令用于规定模块的对外接口，import 命令用于输入其他模块提供的功能。

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个 变量，就必须使用export关键字输出该变量。

$ npm install react react-bootstrap

import Button from ‘react-bootstrap/lib/Button’;
// or
import { Button } from ‘react-bootstrap’;

参考

• 关于 CommonJS AMD CMD UMD 规范的差异总结