JS中的模块规范：AMD，CMD，CommonJS, UMD, ES6模块化-CSDN博客

前端开发一直在强调js模块化，将一个功能当做一个模块来开发，js本身并没有模块的功能。JS中的模块化规范主要有：

AMD，即 Asynchronous Module Definition: 异步模块定义：这种规范可以异步的加载或依赖其他模块， Require.js就遵循的AMD规范。
CMD，即 Common Module Definition，CMD则是依赖就近，用的时候再require。玉伯写的sea.js 就是遵循的CMD规范。
CommonJS，NodeJS就采用了CommonJS。
UMD，即通用模块定义，UMD规范兼容AMD 和 CommonJs。

AMD 规范

AMD规范只定义了一个函数 "define"，它是全局变量。函数的描述为：

//  '?' 表示该参数是可选的
define(id?, dependencies?, callback);
复制代码

id，是个字符串，指定模块的名字。如果没有提供该参数，模块的名字应该默认为模块加载器请求的指定脚本的名字。如果提供了该参数，模块名必须是“顶级”的和绝对的（不允许相对名字）。
dependencies，是个数组，指定该模块依赖的模块数组。依赖模块依次执行，并且执行的结果，应该按照依赖模块数组中的位置顺序以参数的形式传入callback中。
factory，依赖模块加载成功之后的回调函数或对象，如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值。。

AMD规范定义了三个特殊的依赖关键字。如果"require","exports", 或 "module" 出现在依赖列表中，参数应该按照CommonJS模块规范自由变量去解析。如果依赖参数没传，默认为["require", "exports", "module"]。然而，如果factory的形参个数小于3，加载器会选择以函数指定的参数个数调用factory。

AMD 定义模块：

// 要在声明模块的时候指定所有的依赖(dep)，并且还要当做形参传到factory中
// 这里的依赖是jquery
define(['jquery'], factory($) {
  return {
    myMethod: function() {
       console.log('AMD 规范');
    }
  };
})
复制代码

一个使用Simplified CommonJS Wrapping的模块定义：

define(function (require, exports, module) {
      var a = require('a'),
          b = require('b');
       exports.action = function () {};
  };
})
复制代码

CMD 规范

CMD, 是seajs推崇的规范，CMD则是依赖就近，用的时候再require。写法如下：

// define(factory方法)
define(function(require, exports, module) {
   var a = require('a');
   a.hello();
});
复制代码

AMD和CMD都是异步加载模块，最大的区别是对依赖模块的执行时机不同，而不是加载方式不同。

AMD依赖前置，提前执行，依赖模块一目了然；
CMD依赖就近，并行加载所有依赖的模块, 但不会立即执行模块, 等到对应 require 语句时，才执行模块。因此CMD需要从factory.toString() 中提取到依赖模块，这会导致更长的等待时间，实际上解析模块用的时间短到可以忽略。

CommonJS 规范

NodeJS的模块系统就是遵循CommonJS规范实现的。CommonJS是主要为了JS在后端的表现制定的，实现CommonJS规范的API是同步加载模块的，因为在服务端模块的加载一般是从本地磁盘中读取，加载速度很快，不像客户端端需要发送请求加载，可能出现'假死'状况。

CommonJS定义的模块分为:

模块引用(require)：用来引入外部模块
模块定义(exports)：用于导出当前模块的方法或变量，唯一的导出口
模块标识(module)：module对象就代表模块本身

 //add.js
exports.add = function(x, y){
  return x+y;
};

//main.js
var math = require('add');
exports.add = function(n){
     return math.add(100, n);
};
复制代码

Browserify(browserify.org/) 是目前最常用的 CommonJS 格式转换的工具, 能够将commonJs规范的代码转换为浏览器可直接执行的代码。

虽说Node遵循CommonJS的规范，但是相比也是做了一些取舍，填补了一些新东西的。

UMD（通用模块规范）

UMD规范则是兼容了 AMD 和 CommonJs。

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        // Node, CommonJS之类的
        module.exports = factory(require('jquery'));
    } else {
        // 浏览器全局变量 (root 即window)
        root.returnExports = factory(root.jQuery);
    }
}(this, function ($) {
    function add(){};
    // 暴露公共方法
    return {
      add: add
    };
}));
复制代码

ES6模块化

ES6 模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。 Require是CommonJS的语法，CommonJS的模块是对象，输入时必须查找对象属性。

// CommonJS模块
let { stat, exists, readFile } = require('fs');
复制代码

Commonjs：整体加载fs模块（即加载fs所有方法），生成一个对象"_fs"，然后再从这个对象上读取三个方法，这叫“运行时加载”，因为只有运行时才能得到这个对象，不能在编译时做到静态化。

ES6模块不是对象，而是通过export命令显示指定输出代码，再通过import输入。 ES6模块是编译时加载：模块之间的依赖关系，在运行之前（即编译时）就通过静态分析来确定好了的。

// 从fs加载“stat, exists, readFile” 三个方法，其他方法不加载，这是编译时加载，也叫静态加载
import { stat, exists, readFile } from 'fs';
复制代码

ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";。
ES6使用import, export 实现的模块化。import 用来导入其它模块， export 用来输出对外的接口，可以是变量，函数和类。

export 关键字

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

export可以输出变量、函数和类，但不可以直接输出值，否则会报错，因为export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。

const sum = function(a, b) {
  return a+b;
}
const minus = function(a, b) {
  return a-b;
} 
// 同一个模块可以有多个export 命令语句。
export {
  sum 
}
// as 关键字用来重命名变量
export {
  minus as reduce
}
复制代码

注意：export不能输出值，并且它输出的变量函数名或者类名要放在"{ }"中

export default命令

export default为模块指定默认输出，一个模块只能有一个默认输出。可以理解为：export default 就是输出一个叫做default的变量，系统允许你为它取任意名字。

export default  sum(a, b) {
  return a+b;
}
复制代码

import:

使用import加载export输出的接口，必须用{ }包住

import  {sum as add,  reduce } from './index.js';
复制代码

使用import加载export default 输出的接口

// 方式1
import  sum from './index.js';

// 方式2： 可以任意命名
import  default as foo from './index.js';
复制代码

注意：

import只会导入一次，无论你引入多少次有提升效果，import会自动提升到顶部，首先执行
由于import是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构。
循环加载时，ES6模块是动态引用。只要两个模块之间存在某个引用，代码就能够执行。