【综合】AMD、CMD、CommonJS和ES6的比较

[Dliling]

在阐述这四种方式之前，先来说下模块化~
模块化
近几年一直在说模块化，那么模块化之后有何优势呢？
将代码切割成模块后，大家可以根据自己的需要，想加载什么功能就加载对应的模块。当前这个前提是大家书写的代码使用了同一个规范，否则各写各的，引入后也不生效哎~

下面介绍的几种方式都是模块化的一些规范~

CommonJS
CommonJS是node服务提出的模块化规范，所以要在node服务环境下运行。在前端浏览器并不支持module.exports。

CommonJS通过exports导出当前模块的方法或变量，是唯一的导出口。require导入模块。

// utils.js 导出模块
function getNumber(){
    return 1
}
exports = {
    getNumber: getNumber  //导出getNumber方法
}
//等同于
exports.getNumber = function(){
    return 1; //导出一个方法叫getNumber
 }
//等同于
function getNumber(){
    return 1
}
module.exports = {getNumber}

// 导入模块
const {getNumber} = require('../utils');
// 等同于
const utils = require('../utils');

AMD(Asynchronous Module Definition)：异步模块加载机制
是requireJS在推广中产出的模块化规范，如JQuery使用该规范。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，所有需要的依赖前置，等到加载完成之后，这个回调函数才会运行。
requireJS实现了CMD规范。
在AMD中，导入和导出模块的代码，都必须放置在define函数中

define([依赖的模块列表], function(模块名称列表){
    //模块内部的代码
    return 导出的内容
})

如果多个文件用到了同一个模块，模块都会读取一次，执行一次，加入缓冲中。

后来，requireJS也实现了CMD规范。

CMD(Common Module Definition)：公共模块定义规范
SeaJS在推广过程中对于模块化定义的产出。依赖就近，什么地方使用就什么时候依赖。
在CMD中，导入和导出模块的代码，都必须放置在define函数中

define(function(require，exports，module){
    //模块内部的代码
});

// 使用
define(function(require, exports, module) {
    const utils1 = require("./utils1.js");
    const utils2 = require("./utils2.js");
    module.exports = "导出该模块的内容";
});

ES6模块化
特点：

1. 使用依赖预声明的方式导入模块
2. 灵活的多种导入导出方式
3. 规范的路径表示法：所有路径必须以./或…/开头

// 基本导出，必须有名字
export const a = 1;

const age = 18;
const name = 'Jhon';
export = {
    age,
    // 通过as进行重命名
    name as name1
};

// 基本导入，由于依赖预加载，建议把所有导入放在代码之前
import a from './utils.js';
import {age, name1} from './utils.js';

// 默认导出
export default {
    age,
    name
};

// 默认导入，import后加一个接收变量，可以自定义
import data from './utils.js';

参考：
模块化之CommonJs、AMD、CMD和ES6模块化
js模块化编程之彻底弄懂CommonJS和AMD/CMD！