总结AMD、CMD、CommonJS、UMD的区别

自己看文章理解的，可能不太准确，就是帮助自己记忆

AMD、CMD、CommonJS是三种JavaScript模块规范

一、CommonJS是一种后端js规范，是nodeJs遵循的一种编写js模块的规范，（是由nodejs将其发扬光大的），同时也开启了js全栈的大门

1、定义模块 
根据CommonJS规范，一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性

2、模块输出： 
模块只有一个出口，module.exports对象，我们需要把模块希望输出的内容放入该对象

3、加载模块： 
加载模块使用require方法，该方法读取一个文件并执行，返回文件内部的module.exports对象

例子

//模块定义 myModel.js

var name = 'Byron';

function printName(){
    console.log(name);
}

function printFullName(firstName){
    console.log(firstName + name);
}

module.exports = {
    printName: printName,
    printFullName: printFullName
}

//加载模块

var nameModule = require('./myModel.js');

nameModule.printName();

注意：不同的实现对require时的路径有不同要求，一般情况可以省略js拓展名，可以使用相对路径，也可以使用绝对路径，甚至可以省略路径直接使用模块名（前提是该模块是系统内置模块）

二、 AMD  全称Asynchronous Module Definition   由于不是JavaScript原生支持，使用AMD规范进行页面开发需要用到对应的库函数，也就是大名鼎鼎RequireJS，AMD是 RequireJS 在推广过程中对模块定义的规范化的产出

requireJS主要解决两个问题

1、多个js文件可能有依赖关系，被依赖的文件需要早于依赖它的文件加载到浏览器 
2、js加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应时间越长 

requireJS的例子

// 定义模块 myModule.js
define(['dependency'], function(){
    var name = 'Byron';
    function printName(){
        console.log(name);
    }

    return {
        printName: printName
    };
});

// 加载模块
require(['myModule'], function (my){
　 my.printName();
});

语法

requireJS定义了一个函数 define，它是全局变量，用来定义模块

define(id?, dependencies?, factory);

1. id：可选参数，用来定义模块的标识，如果没有提供该参数，脚本文件名（去掉拓展名）
2. dependencies：是一个当前模块依赖的模块名称数组
3. factory：工厂方法，模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值 
   在页面上使用require函数加载模块

require([dependencies], function(){}); 
require()函数接受两个参数

1. 第一个参数是一个数组，表示所依赖的模块
2. 第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块

require()函数在加载依赖的函数的时候是异步加载的，这样浏览器不会失去响应，它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。

CMD

CMD 即Common Module Definition通用模块定义，CMD规范是国内发展出来的，就像AMD有个requireJS，CMD有个浏览器的实现SeaJS，SeaJS要解决的问题和requireJS一样，CMD是 SeaJS 在推广过程中对模块定义的规范化的产出

最明显的区别就是在模块定义时对依赖的处理不同

1、AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块 

2、CMD推崇就近依赖，只有在用到某个模块的时候再去require 

UMD   （Universal Module Definition）

UMD是AMD和CommonJS的糅合

(function (root, factory) {  
    if (typeof exports === 'object') {
        // Commonjs  
        module.exports = factory();  
          
    } else if (typeof define === 'function' && define.amd) {  
        // AMD
        define(factory);  
          
    } else {  
        //  没有使用模块加载器的方式
        window.eventUtil = factory();  
    }  
})(this, function() {  
    // module  
    return {  
        addEvent: function(el, type, handle) {  
            //...  
        },  
        removeEvent: function(el, type, handle) {  
              
        },  
    };  
});  

类似文章链接https://www.jianshu.com/p/bd4585b737d7