Module的語法

Jsp發表於2018-08-03

一：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）這些只能靠靜態分析實現的功能。


相關文章