前端模块规范：AMD规范、CMD规范、CommonJS规范、ES6 Module

CommonJS规范

CommonJS对模块的定义主要分为模块引用、模块定义和模块标识3个部分。
1、模块引用
模块引用的示例代码如下：

var math = require('math');

在CommonJS规范中，存在require()方法，这个方法接受模块标识，以此引入一个模块的API到当前上下文中。

2、模块定义
在模块中，上下文提供require()方法来引入外部模块。对应引入的功能，上下文提供了exports对象用于导出当前模块的方法或者变量，并且它是唯一导出的出口。在模块中，还存在一个module对象，它代表模块自身，而exports是module的属性。在Node中，一个文件就是一个模块，将方法挂载在exports对象上作为属性即可定义导出的方式：

// math.js
exports.add = function () {
  var sum = 0,
    i = 0,
    args = arguments,
    l = args.length;
  while (i < l) {
    sum += args[i++];
  }
  return sum;
};

在另一个文件中，我们通过require()方法引入模块后，就能调用定义的属性或方法了：

// program.js
var math = require('math');
exports.increment = function (val) {
  return math.add(val, 1);
};

模块标识
模块标识其实就是传递给require()方法的参数，它必须是符合小驼峰命名的字符串，或者以’.’、’..'开头的相对路径，或者绝对路径。它可以没有文件名后缀.js。
它的意义在于将类聚的方法和变量等限定在私有的作用域中，同时支持引入和导出功能以顺畅地连接上下游依赖。

AMD规范

AMD规范的全称是“Asychronous Module Definition”，即“异步模块定义”。

它的模块定义如下：

define(id?,  dependencies?, factory);

其中模块id和依赖是可选的，factory的内容就是实际代码的内容。
如：

define(function() {
  var exports = {};
  exports.sayHello = function() {
    alert('Hello from module: ' + module.id);
  };
  return exports;
});

和CommonJS不同之处在于AMD模块需要define来明确定义一个模块（Node是隐式包装），目的是进行作用域隔离，仅在需要的时候被引入，避免掉全局变量污染和不小心被修改；
另一个区别是内容需要通过返回值的方式实现导出。

AMD规范需要再声明模块的时候指定所有依赖，通过形参传到模块内容中。

define(['dep1', 'dep2'], function (dep1, dep2) {
	return function() {};
})

CDM规范

和AMD规范的主要区别在于定义模块和依赖引入的部分。
CMD支持动态引入。

define (function(require, export , module) {
	// 模块代码
}

require,exports, module通过形参传递给模块，在需要依赖模块时，随时调用require()引入即可(更接近CommomJS)

define(function(require, exports) {

  // 同步获取模块 a 的接口
  var a = require('./a');

  // 调用模块 a 的方法
  a.doSomething();

// 异步加载多个模块，在加载完成时，执行回调
  require.async(['./b', './c'], function(b, c) {
    b.doSomething();
    c.doSomething();
  });
});

注意 ：
require 是同步往下执行，require.async 则是异步回调执行。require.async 一般用来加载可延迟异步加载的模块。

如何兼容多种模块规范

以hello()方法定义到不同运行环境中，兼容Node、AMD、CMD以及常见的浏览器环境中：

;(function (name, definition) {
  // 检测上下文环境是否为AMD或CMD
  var hasDefine = typeof define === 'function',
    // 检查上下文环境是否为Node
    hasExports = typeof module !== 'undefined' && module.exports;

  if (hasDefine) {
    // AMD环境或CMD环境
    define(definition);
  } else if (hasExports) {
    // 定义为普通Node模块
    module.exports = definition();
  } else {
    // 将模块的执行结果挂在window变量中，在浏览器中this指向window对象
    this[name] = definition();
  }
})('hello', function () {
  var hello = function () {};
  return hello;
});

总结

AMD和require.js

AMD是“异步模块定义”，浏览器模块开发的规范。
特点：

• 实现js文件的异步加载（避免加载时网页失去响应）；
• 声明模块时需要先指定依赖，推崇依赖前置，提前执行。

define(['dep1', 'dep2'], function (dep1, dep2) {
	return function() {};
})

RequireJS核心原理是什么？（如何动态加载的？如何避免多次加载的？如何缓存的？）
RequireJS是基于AMD模块加载规范，使用回调函数来解决模块加载问题。
动态加载原理：RequireJS是使用创建script元素， 通过指定script元素的src属性来实现加载模块的。
特点：
实现js文件的异步加载（避免加载时网页失去响应）；
管理模块直接的依赖，便于代码的编写和维护。

CMD和sea.js

CMD是“通用模块”定义。浏览器模块开发的规范。
CMD推崇依赖就近、延迟执行。
AMD和CMD区别是：AMD是依赖提前定义；CMD是使用的时候再require。
自身可以

CommonJS和Node.js

CommonJS是服务器端模块的规范，Node.js采用了这个规范。
CommonJS规范一个单独的文件就是一个模块，加载模块使用require方法，该方法读取一个文件并执行。最后返回文件内部的exports对象。
CommonJS是同步加载模块的。所以只有加载完才能继续后面的操作。
Node.js主要是服务端编程，所以加载的模块一般存于本地磁盘，加载起来比较快，不用考虑异步加载的方式。

ES6 Module

ES6在语言的标准上实现模块功能，而且实现的很简单，
ES6模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。
ES6的设计思想，是尽量静态化，使得编译时就可以确认模块的依赖关系，以及输入和输出的变量。
ES6模块不是对象，而是通过export命令显示指定输出的代码，输入也使用静态命令的形式。
ES6 Module可以在编译时就完成模块编译，效率比CommonJS要高。