很多人分不清ES6模塊,CommonJS,AMD,CMD,UMD,今天就從特性和使用,來說一下,他們之間的區(qū)別.

1.ES6模塊

• ES6模塊,也稱為esm.它具有以下幾個(gè)特性.
  1.瀏覽器可以直接加載ES6模塊,也是使用<script>標(biāo)簽,但是要加入type="module"屬性.
  <script type="module" src="./foo.js"></script>
  2.ES6 的模塊自動(dòng)采用嚴(yán)格模式，不管你有沒有在模塊頭部加上"use strict";。
  3.ES6 模塊輸出的是值的引用。
  4.ES6 模塊是編譯時(shí)輸出接口。
  5.ES6 模塊的import命令是異步加載，有一個(gè)獨(dú)立的模塊依賴的解析階段。

• ES6模塊的使用
  模塊功能主要由兩個(gè)命令構(gòu)成：export和import。export命令用于規(guī)定模塊的
  對(duì)外接口，import命令用于輸入其他模塊提供的功能.

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

  //test.js
    import { year } from './profile.js'; //對(duì)應(yīng)export {}
    import year from './profile.js';  //對(duì)應(yīng)export default

2.CommonJs

CommonJs 主要應(yīng)用與nodejs服務(wù)端.

• CommonJS具有以下特性:
  1.一個(gè)文件就是一個(gè)模塊，擁有單獨(dú)的作用域。
  2.普通方式定義的變量、函數(shù)、對(duì)象屬于該模塊內(nèi)。
  3.CommonJS 模塊輸出的是一個(gè)值的拷貝。
  4.CommonJS 模塊是運(yùn)行時(shí)加載。
  5.CommonJS 模塊的require()是同步加載模塊。

• CommonJs的使用
  CommonJs通過require來加載模塊,通過module.exports或者exports來暴露模塊中的內(nèi)容。

//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具有以下幾個(gè)特性:

  1. 采用異步方式加載模塊，模塊的加載不影響它后面語句的運(yùn)行.
  2. 所有依賴這個(gè)模塊的語句，都定義在一個(gè)回調(diào)函數(shù)中，等到加載完成之后，這個(gè)回調(diào)函數(shù)才會(huì)運(yùn)行.
  3. 推崇依賴前置，在定義模塊的時(shí)候就要聲明其依賴的模塊

• AMD的使用
  使用require.js來實(shí)現(xiàn)AMD規(guī)范的模塊化：用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類似.不同點(diǎn)在于：AMD推崇依賴前置，提前執(zhí)行，而CMD推崇依賴就近，延遲執(zhí)行.它的使用和定義需要使用SeaJS.

• CMD具有以下幾個(gè)特性:

  1.采用異步方式加載模塊，模塊的加載不影響它后面語句的運(yùn)行.
  2.推崇就近依賴，只有在用到某個(gè)模塊的時(shí)候再去require

• CMD的使用
  使用define來定義define(id?, deps?, factory)
  factory是一個(gè)函數(shù)，有三個(gè)參數(shù)，function(require, exports, module)
  require 是一個(gè)方法，接受 模塊標(biāo)識(shí) 作為唯一參數(shù)，用來獲取其他模塊提供的接口：require(id)
  exports 是一個(gè)對(duì)象，用來向外提供模塊接口
  module 是一個(gè)對(duì)象，上面存儲(chǔ)了與當(dāng)前模塊相關(guān)聯(lián)的一些屬性和方法

 // 定義模塊  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通用模塊定義規(guī)范，讓你的模塊能在javascript所有運(yùn)行環(huán)境中發(fā)揮作用。它就是將AMD和Commonjs整合起來,使得代碼在不同環(huán)境都可以正常運(yùn)行.

• UMD的實(shí)現(xiàn):

(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
})