ES6 模块,CommonJS,AMD,CMD,UMD之间的区别

很多人分不清ES6模块,CommonJS,AMD,CMD,UMD,今天就从特性和使用,来说一下,他们之间的区别.

1.ES6模块

• ES6模块,也称为esm.它具有以下几个特性.
  1.浏览器可以直接加载ES6模块,也是使用
  2.ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";。
  3.ES6 模块输出的是值的引用。
  4.ES6 模块是编译时输出接口。
  5.ES6 模块的import命令是异步加载，有一个独立的模块依赖的解析阶段。

• ES6模块的使用
  模块功能主要由两个命令构成：export和import。export命令用于规定模块的
  对外接口，import命令用于输入其他模块提供的功能.

  // profile.js
    var year = 1958;
    export { year };
    export default year;

  //test.js
    import { year } from './profile.js'; //对应export {}
    import year from './profile.js';  //对应export default

2.CommonJs

CommonJs 主要应用与nodejs服务端.

• CommonJS具有以下特性:
  1.一个文件就是一个模块，拥有单独的作用域。
  2.普通方式定义的变量、函数、对象属于该模块内。
  3.CommonJS 模块输出的是一个值的拷贝。
  4.CommonJS 模块是运行时加载。
  5.CommonJS 模块的require()是同步加载模块。

• CommonJs的使用
  CommonJs通过require来加载模块,通过module.exports或者exports来暴露模块中的内容。

//lib.js
 function incCounter() {
   counter++;
  }
  module.exports = 
     incCounter: incCounter,
  };

//main.js
const mod = require('./lib');
console.log(mod.counter);  // 3
mod.incCounter();

3.AMD

AMD的全称是Asynchronous Module Definition,异步加载模块.它主要是使用在浏览器上.它的 使用定义需要使用requireJS.

• AMD具有以下几个特性:

  1. 采用异步方式加载模块，模块的加载不影响它后面语句的运行.
  2. 所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行.
  3. 推崇依赖前置，在定义模块的时候就要声明其依赖的模块

• AMD的使用
  使用require.js来实现AMD规范的模块化：用require.config()指定引用路径。用define()来定义模块用require来加载模块。

define('moduleName',['a','b'],function(ma, mb) {
  return someExportValue;
})

require(['a', 'b'], function(ma, mb) {
   //    do something
})

4.CMD

CMD的全称是Common Module Definition通用模块定义,与AMD类似.不同点在于：AMD推崇依赖前置，提前执行，而CMD推崇依赖就近，延迟执行.它的使用和定义需要使用SeaJS.

• CMD具有以下几个特性:

  1.采用异步方式加载模块，模块的加载不影响它后面语句的运行.
  2.推崇就近依赖，只有在用到某个模块的时候再去require

• CMD的使用
  使用define来定义define(id?, deps?, factory)
  factory是一个函数，有三个参数，function(require, exports, module)
  require 是一个方法，接受 模块标识 作为唯一参数，用来获取其他模块提供的接口：require(id)
  exports 是一个对象，用来向外提供模块接口
  module 是一个对象，上面存储了与当前模块相关联的一些属性和方法

 // 定义模块  module.js
define(function(require, exports, module) {
  var $ = require('jquery.min.js')
  $('div').addClass('active');
});

// 加载模块
seajs.use(['module.js'], function(my){
});

5.UMD

UMD的全称为Universal Module Definition，就是一种javascript通用模块定义规范，让你的模块能在javascript所有运行环境中发挥作用。它就是将AMD和Commonjs整合起来,使得代码在不同环境都可以正常运行.

• UMD的实现:

(function(window, factory){
   if (typeof exports === 'object') {
      module.exports = factory()
   } else if (typeof define === 'function' && define.amd) {
      define(factory)
   } else {
     window.eventUtil = factory()
  }
})(this,function () {
    //    do something
})