CMD、AMD、CommonJS、UMD 的区别

它们都是一种模块定义规范，因为项目都是由很多模块组成的，而通过模块规范，就可以在一个文件中引入其它的模块，达到复用的目的，开发者根据制定的规范，也减少了沟通的成本。不同的是，CommonJS 主要在服务端 Node.js 环境中运行，CMD 和 AMD 主要在客户端浏览器的 require.js 或 sea.js 环境中运行。另外，UMD 是一种统一模块定义规范，是前端发展的产物，原理是通过判断当前环境，而使用对应的 CommonJS、CMD、AMD。下面来聊聊细节：

1、CommonJS

在 CommonJS 中，module 是一个变量，本质是对象；module 属性的 exports 属性是一个对外接口，而当我们在一个文件中使用 require 加载一个模块时，其实就是加载该模块的 module.exports 属性。

// module-a.js
mudel.exports = {
    a:1
}

// module-b.js
const test = require("./a.js")
const b = test.a + 1
console.log(test.a)  // log:1
module.exports = { // 再导出
    b:b
}

2、CMD 和 AMD

CMD 的叫法是通用模块定义（Common Module Definition），语法和 CommonJS 是类似的，但多了个 define，它支持异步加载脚本能力，并且兼容 Nodejs，具体用法如下：

// moudule-a.js
define(function(require, exports, module) {
    module.exports = { 
        a: 1 
    }
})

// module-b.js
define(function(require, exports, module) {
    const test = require('./moudle-a');
    const b = test.a + 2;
    module.exports = { 
        b: b 
    }
})

AMD 的叫法是异步模块定义（Asynchronous Module Definition），故名思义，它主要用于浏览器异步加载模块，是在 sea.js 在推广过程中定义的规范，而 CMD 是 require.js 在推广过程中定义的规范，在这里不进行细述，具体语法如下：

// module-a.js
define('moduleA', function() { 
    return {
        a: 1
    }
})

// module-b.js
define(['moduleA'], function(ma) {
    const b = ma.a + 2;
    return {
        b: b
    }
})

3、UMD

UMD 的全称是统一模块定义（Universal Modul Definition）。它本质上是没有新的规范的，它的原理主要是对当前运行的环境进行判断，然后再决定用哪一种规范，具体用法如下：

(function(root, factory) {
    if (typeof module === 'object' && typeof module.exports === 'object') {
        console.log('是 commonjs 模块规范，nodejs 环境')
        module.exports = factory();
    } else if (typeof define === 'function' && define.amd) {
        console.log('是 AMD 模块规范，如 require.js')
        define(factory())
    } else if (typeof define === 'function' && define.cmd) {
        console.log('是 CMD 模块规范，如 sea.js')
        define(function(require, exports, module) {
            module.exports = factory()
        })
    } else {
        console.log('没有模块环境，直接挂载在全局对象上')
        root.umdModule = factory();
    }
}(this, function() {
    return {
        name: '我是一个umd模块'
    }
}))