[面試專題]JS中模塊AMD,CMD,import

js中的require、import和export

---

require時代

Javascript社區作了不少努力，在現有的運行環境中，實現"模塊"的效果。

對象寫法

把模塊寫成一個對象，全部的模塊成員都放到這個對象裏面

var module1 = new Object({
  _count : 0,
　m1 : function (){
　　//...
　},
　m2 : function (){
　　//...
　}
});

上面的函數m1()和m2(），都封裝在module1對象裏。使用的時候，就是調用這個對象的屬性

module1.m1();

這樣的寫法會暴露全部模塊成員，內部狀態能夠被外部改寫。好比，外部代碼能夠直接改變內部計數器的值。

module._count = 1;

當即執行函數寫法

使用"當即執行函數"（Immediately-Invoked Function Expression，IIFE），能夠達到不暴露私有成員的目的

var module = (function() {
    var _count = 0;
    var m1 = function() {
        alert(_count)
    }
    var m2 = function() {
        alert(_count + 1)
    }

    return {
        m1: m1,
        m2: m2
    }
})()

module就是Javascript模塊的基本寫法。

主流模塊規範

在es6之前，尚未提出一套官方的規範,從社區和框架推廣程度而言,目前通行的javascript模塊規範有兩種：CommonJS 和 AMD

CommonJS規範

node編程中最重要的思想之一就是模塊，而正是這個思想，讓JavaScript的大規模工程成爲可能。服務端使用CommonJS模塊規範。

在CommonJS中，有一個全局性方法require()，用於加載模塊。假定有一個數學模塊math.js，就能夠像下面這樣加載。

　var math = require('math');
　math.add(2,3); // 5

正是因爲CommonJS 使用的require方式的推進，纔有了後面的AMD、CMD 也採用的require方式來引用模塊的風格

AMD規範

Common.js起源於node,所以在服務端普遍使用.對服務端，全部的模塊都存放在本地硬盤，能夠同步加載完成，等待時間就是硬盤的讀取時間。可是，對於瀏覽器，這倒是一個大問題，由於模塊都放在服務器端，等待時間取決於網速的快慢，可能要等很長時間，瀏覽器處於"假死"狀態。
所以，瀏覽器端的模塊，不能採用"同步加載"（synchronous），只能採用"異步加載"（asynchronous）。這就是AMD規範誕生的背景。

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

模塊必須採用特定的define()函數來定義。

define(id?, dependencies?, factory)

• id:字符串，模塊名稱(可選)

• dependencies: 是咱們要載入的依賴模塊(可選)，使用相對路徑。,注意是數組格式

• factory: 工廠方法，返回一個模塊函數

若是一個模塊不依賴其餘模塊，那麼能夠直接定義在define()函數之中。

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

若是這個模塊還依賴其餘模塊，那麼define()函數的第一個參數，必須是一個數組，指明該模塊的依賴性。

define(['Lib'], function(Lib){
　　　　function foo(){
　　　　　　Lib.doSomething();
　　　　}
　　　　return {
　　　　　　foo : foo
　　　　};
　　});

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

AMD也採用require()語句加載模塊，可是不一樣於CommonJS，它要求兩個參數：

require([module], callback);

第一個參數[module]，是一個數組，裏面的成員就是要加載的模塊；第二個參數callback，則是加載成功以後的回調函數。若是將前面的代碼改寫成AMD形式，就是下面這樣：

require(['math'], function (math) {
　math.add(2, 3);
});

math.add()與math模塊加載不是同步的，瀏覽器不會發生假死。因此很顯然，AMD比較適合瀏覽器環境。

目前，主要有兩個Javascript庫實現了AMD規範：require.js和curl.js。

CMD規範

CMD (Common Module Definition), 是seajs推崇的規範，CMD則是依賴就近，用的時候再require。它寫起來是這樣的：

define(function(require, exports, module) {
   var clock = require('clock');
   clock.start();
});

CMD與AMD同樣，也是採用特定的define()函數來定義,用require方式來引用模塊

define(id?, dependencies?, factory)

• id:字符串，模塊名稱(可選)

• dependencies: 是咱們要載入的依賴模塊(可選)，使用相對路徑。,注意是數組格式

• factory: 工廠方法，返回一個模塊函數

define('hello', ['jquery'], function(require, exports, module) {

  // 模塊代碼

});

若是一個模塊不依賴其餘模塊，那麼能夠直接定義在define()函數之中。

define(function(require, exports, module) {
  // 模塊代碼
});

注意：帶 id 和 dependencies 參數的 define 用法不屬於 CMD 規範，而屬於 Modules/Transport 規範。

CMD與AMD區別

AMD和CMD最大的區別是對依賴模塊的執行時機處理不一樣，而不是加載的時機或者方式不一樣，兩者皆爲異步加載模塊。

AMD依賴前置，js能夠方便知道依賴模塊是誰，當即加載；

而CMD依賴就近，須要使用把模塊變爲字符串解析一遍才知道依賴了那些模塊，這也是不少人詬病CMD的一點，犧牲性能來帶來開發的便利性，實際上解析模塊用的時間短到能夠忽略。

現階段的標準

ES6標準發佈後，module成爲標準，標準使用是以export指令導出接口，以import引入模塊，可是在咱們一向的node模塊中，咱們依然採用的是CommonJS規範，使用require引入模塊，使用module.exports導出接口。

import引入模塊

import語法聲明用於從已導出的模塊、腳本中導入函數、對象、指定文件（或模塊）的原始值。

import模塊導入與export模塊導出功能相對應，也存在兩種模塊導入方式：命名式導入（名稱導入）和默認導入（定義式導入）。

注意:import必須放在文件的最開始.import命令是編譯階段執行的，在代碼運行以前,表達式和變量只有在運行時才能獲得結果的語法結構。import命令會被 JavaScript 引擎靜態分析，先於模塊內的其餘模塊執行（叫作」鏈接「更合適）因此import中不能含有表達式或者變量,所以沒法實現動態加載.
所以，import和export命令只能在模塊的頂層，不能在代碼塊之中（好比，在if代碼塊之中，或在函數之中）。
這樣的設計，有利於編譯器提升效率，但也致使沒法在運行時加載模塊。在語法上，條件加載就不可能實現。若是import命令要取代 Node 的require方法，這就造成了一個障礙。由於require是運行時加載模塊，import命令沒法取代require的動態加載功能。

ES6 模塊與 CommonJS 模塊的差別

來自阮一峯ES6教程

CommonJS 模塊輸出的是一個值的拷貝，ES6 模塊輸出的是值的引用。CommonJS 模塊是運行時加載，ES6 模塊是編譯時輸出接口ES6 模塊的運行機制與 CommonJS 不同。JS 引擎對腳本靜態分析的時候，遇到模塊加載命令import，就會生成一個只讀引用。等到腳本真正執行時，再根據這個只讀引用，到被加載的那個模塊裏面去取值。換句話說，ES6 的import有點像 Unix 系統的「符號鏈接」，原始值變了，import加載的值也會跟着變。所以，ES6 模塊是動態引用，而且不會緩存值，模塊裏面的變量綁定其所在的模塊。