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

逺方小鎭發表於2019-02-16
面試JSImport

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 模組是動態引用，並且不會快取值，模組裡面的變數繫結其所在的模組。

相關文章