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

舞動乾坤發表於2018-05-15
JSUIImport

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－從已經存在的模組、指令碼檔案…匯出

參考資料

Happy coding .. :)

相關文章