CommonJS,AMD,CMD,ES6,require 和 import 詳解

CommonJS,AMD,CMD,ES6

commonJS用同步的方式加載模塊。在服務端，模塊文件都存在本地磁盤，讀取很是快，因此這樣作不會有問題。可是在瀏覽器端，限於網絡緣由，更合理的方案是使用異步加載。

CMD是另外一種js模塊化方案，它與AMD很相似，不一樣點在於：AMD 推崇依賴前置、提早執行，CMD推崇依賴就近、延遲執行。此規範實際上是在sea.js推廣過程當中產生的。

/** AMD寫法 **/
define(["a", "b", "c", "d", "e", "f"], function(a, b, c, d, e, f) { 
     // 等於在最前面聲明並初始化了要用到的全部模塊
    a.doSomething();
    if (false) {
        // 即使沒用到某個模塊 b，但 b 仍是提早執行了
        b.doSomething()
    } 
});
複製代碼

/** CMD寫法 **/
define(function(require, exports, module) {
    var a = require('./a'); //在須要時申明
    a.doSomething();
    if (false) {
        var b = require('./b');
        b.doSomething();
    }
}); 
複製代碼

ES6 模塊是動態引用:ES6的模塊不是對象，import命令會被 JavaScript 引擎靜態分析，在編譯時就引入模塊代碼，而不是在代碼運行時加載，因此沒法實現條件加載。也正由於這個，使得靜態分析成爲可能。

ES6 模塊與 CommonJS 模塊的差別

1. CommonJS 模塊輸出的是一個值的拷貝，ES6 模塊輸出的是值的引用

CommonJS 模塊輸出的是值的拷貝，也就是說，一旦輸出一個值，模塊內部的變化就影響不到這個值。

ES6 模塊的運行機制與 CommonJS 不同。JS 引擎對腳本靜態分析的時候，遇到模塊加載命令import，就會生成一個只讀引用。等到腳本真正執行時，再根據這個只讀引用，到被加載的那個模塊裏面去取值。換句話說，ES6 的import有點像 Unix 系統的「符號鏈接」，原始值變了，import加載的值也會跟着變。所以，ES6 模塊是動態引用，而且不會緩存值，模塊裏面的變量綁定其所在的模塊。 2. CommonJS 模塊是運行時加載，ES6 模塊是編譯時輸出接口。 3. 運行時加載: CommonJS 模塊就是對象；即在輸入時是先加載整個模塊，生成一個對象，而後再從這個對象上面讀取方法，這種加載稱爲「運行時加載」。 編譯時加載: ES6模塊不是對象，而是經過 export 命令顯式指定輸出的代碼，import時採用靜態命令的形式。即在import時能夠指定加載某個輸出值，而不是加載整個模塊，這種加載稱爲「編譯時加載」。 CommonJS 加載的是一個對象（即module.exports屬性），該對象只有在腳本運行完纔會生成。而 ES6 模塊不是對象，它的對外接口只是一種靜態定義，在代碼靜態解析階段就會生成。

---

前言

JS模塊化編程是前端小夥伴們必不可少的知識，下面妹子將於自認爲比較清晰的方式列舉出來。

1 require

特色：

• 1.運行時加載
• 2.拷貝到本頁面
• 3.所有引入

1.1 CommonJS

Node.js就是用CommonJS思想。 在CommonJS中，有一個全局性方法require()，用於加載模塊。

1.1.1 用法

var math = require('math');
math.add(2, 3);
複製代碼

var math = require('math');
constMath = new math(2, 3)
Math.add();
複製代碼
複製代碼

1.1.2 模塊寫法

模塊寫法分exports和module.exports。

exports.add = (x,y) => x+y;
複製代碼

module.exports = classmath{
  constructor(x,y) {
    this.x = x;
    this.y = y;
  }

  add() {
    return  x+y;
  }
};
複製代碼
複製代碼

1.2 AMD

require.js和cujo.js就是用AMD思想。

AMD是」Asynchronous Module Definition」的縮寫，意思就是」異步模塊定義」。它採用異步方式加載模塊，模塊的加載不影響它後面語句的運行。全部依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成以後，這個回調函數纔會運行。

第二行math.add(2, 3)，在第一行require(‘math’)以後運行，所以必須等math.js加載完成。也就是說，若是加載時間很長，整個應用就會停在那裏等。 這對服務器端不是一個問題，由於全部的模塊都存放在本地硬盤，能夠同步加載完成，等待時間就是硬盤的讀取時間。可是，對於瀏覽器，這倒是一個大問題，由於模塊都放在服務器端，等待時間取決於網速的快慢，可能要等很長時間，瀏覽器處於」假死」狀態。 所以，瀏覽器端的模塊，不能採用」同步加載」（synchronous），只能採用」異步加載」（asynchronous）。這就是AMD規範誕生的背景。

1.2.1 用法

//require([module], callback);require(['math'], function (math) {
 math.add(2, 3);
});
複製代碼
複製代碼

1.2.1 模塊寫法

define(id?, dependencies?, factory)

• id:字符串，模塊名稱(可選)
• dependencies: 是咱們要載入的依賴模塊(可選)，使用相對路徑。,注意是數組格式
• factory: 工廠方法，返回一個模塊函數

一個模塊不依賴其餘模塊寫法

// math.js
define(function (){
    var add = function (x,y){
        return x+y;
    };
    return {
        add: add
    };
});
複製代碼
複製代碼

模塊還依賴其餘模塊

define(['a','b'], function(a,b){
    functionfoo(){
        a.doSomething();// 依賴前置，提早執行
        b.doSomething();
    }
    return {
        foo : foo
    };
});
複製代碼
複製代碼

當require()函數加載上面這個模塊的時候，就會先加載Lib.js文件。

1.3 CMD

sea.js就是用CMD思想。 CMD是"Common Module Definition"的縮寫。相似於requirejs，可是seajs是依賴就近，延遲執行，requirejs是依賴前置，提早執行。

1.3.1 用法

seajs.config({
  alias: {
    'jquery': 'http://modules.seajs.org/jquery/1.7.2/jquery.js'
  }
});

seajs.use(['./hello', 'jquery'], function(hello, $) {
  $('#beautiful-sea').click(hello.sayHello);
});
複製代碼
複製代碼

1.3.1 模塊寫法

define(function(require, exports, module) {
  var $ = require('jquery');

  exports.sayHello = function() {
    $('#hello').toggle('slow');
  };
   var b = require("b");
   b.doSomething();    // 依賴就近，延遲執行
});
複製代碼
複製代碼

2 import

特色：

• 1.編譯時加載
• 2.只引用定義
• 3.按需加載

可對比require的特色，發現import完勝require,推薦用import取代require

2.1.1 用法

import有兩種模塊導入方式：命名式導入（名稱導入）和默認導入（定義式導入），以及 import()。

import defaultMember from"module-name";
import * as name from"module-name";
import { member } from"module-name";
import { member as alias } from"module-name";
import { member1 , member2 } from"module-name";
import { member1 , member2 as alias2 , [...] } from"module-name";
import defaultMember, { member [ , [...] ] } from"module-name";
import defaultMember, * as name from"module-name";
import"module-name";
複製代碼
複製代碼

• name－從將要導入模塊中收到的導出值的名稱
• member, memberN－從導出模塊，導入指定名稱的多個成員
• defaultMember－從導出模塊，導入默認導出成員
• alias, aliasN－別名，對指定導入成員進行的重命名
• module-name－要導入的模塊。是一個文件名
• as－重命名導入成員名稱（「標識符」）
• from－從已經存在的模塊、腳本文件等導入

import()

import()返回一個 Promise 對象。

// 報錯if (x === 2) {
  import MyModual from'./myModual';
}
複製代碼
複製代碼

引擎處理import語句是在編譯時，這時不會去分析或執行if語句，因此import語句放在if代碼塊之中毫無心義，所以會報句法錯誤，而不是執行時錯誤。沒辦法像require樣根據條件動態加載。 因而提案引入import()函數，編譯時分析if語句,完成動態加載。

if(x === 2){
  import('myModual').then((MyModual)=>{
    new MyModual();
  })
}
複製代碼
複製代碼

2.2.1 模塊寫法

export有兩種模塊導出方式：命名式導出（名稱導出）和默認導出（定義式導出），命名式導出每一個模塊能夠多個，而默認導出每一個模塊僅一個。

export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
exportlet name1, name2, …, nameN; // also varexportlet name1 = …, name2 = …, …, nameN; // also var, constexportdefault expression;
exportdefaultfunction (…) { … } // also class, function*exportdefaultfunctionname1(…) { … } // also class, function*export { name1 asdefault, … };
 
export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
複製代碼
複製代碼

• name1… nameN－導出的「標識符」。導出後，能夠經過這個「標識符」在另外一個模塊中使用* import引用
• default－設置模塊的默認導出。設置後import不經過「標識符」而直接引用默認導入
• －繼承模塊並導出繼承模塊全部的方法和屬性
• as－重命名導出「標識符」
• from－從已經存在的模塊、腳本文件…導出

參考資料

• raoenhui.github.io/es6/2018/12…
• es6.ruanyifeng.com/#docs/modul…
• www.cnblogs.com/liaojie970/…

Happy coding .. :)