一:AMD和CMD
AMD
,非同步模組定義(Asynchronous Module Definition),它是依賴前置 (依賴必須一開始就寫好)會先儘早地執行(依賴)模組 。換句話說,所有的require
都被提前執行(require 可以是全域性或區域性 )。
CMD
(Common Module Definition)更貼近 CommonJS Modules/1.1 和 Node Modules 規範,一個模組就是一個檔案;它推崇依賴就近,想什麼時候 require
就什麼時候載入,實現了懶載入(延遲執行 ) ;它也沒有全域性 require, 每個API都簡單純粹 。二:CommonJS 和 AMD 模組
CommonJS 和 AMD 模組,都只能在執行時確定這些東西。比如,CommonJS 模組就是物件,輸入時必須查詢物件屬性。ES6 模組的設計思想是儘量的靜態化,使得編譯時就能確定模組的依賴關係,以及輸入和輸出的變數。
// CommonJS模組
let { stat, exists, readFile } = require('fs');
// 等同於
let _fs = require('fs');
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;複製程式碼
上面程式碼的實質是整體載入fs
模組(即載入fs
的所有方法),生成一個物件(_fs
),然後再從這個物件上面讀取 3 個方法。這種載入稱為“執行時載入”,因為只有執行時才能得到這個物件,導致完全沒辦法在編譯時做“靜態優化”。
三:ES6模組
ES6 模組不是物件,而是通過export
命令顯式指定輸出的程式碼,再通過import
命令輸入。
// ES6模組
import { stat, exists, readFile } from 'fs';複製程式碼
上面程式碼的實質是從fs
模組載入 3 個方法,其他方法不載入。這種載入稱為“編譯時載入”或者靜態載入,即 ES6 可以在編譯時就完成模組載入,效率要比 CommonJS 模組的載入方式高。當然,這也導致了沒法引用 ES6 模組本身,因為它不是物件。
由於 ES6 模組是編譯時載入,使得靜態分析成為可能。有了它,就能進一步拓寬 JavaScript 的語法,比如引入巨集(macro)和型別檢驗(type system)這些只能靠靜態分析實現的功能。