JavaScript模組化

Junezm發表於2019-02-16

AMD、CMD、CommonJs、UMD是ES5中提供的模組化程式設計的方案,import/export是ES6中新增。
1.AMD-非同步模組定義
AMD是RequireJS在推廣過程中對模組定義的規範化產出,它是一個概念,RequireJS是對這個概念的實現,就好比JavaScript語言是對ECMAScript規範的實現。AMD是一個組織,RequireJS是在這個組織下自定義的一套指令碼語言。
RequireJS:是一個AMD框架,可以非同步載入JS檔案,按照模組載入方法,通過define()函式定義,第一個引數是一個陣列,裡面定義一些需要依賴的包,第二個引數是一個回撥函式,通過變數來引用模組裡面的方法,最後通過return來輸出。
是一個依賴前置、非同步定義的AMD框架(在引數裡面引入js檔案),在定義的同時如果需要用到別的模組,在最前面定義好即在引數陣列裡面進行引入,在回撥裡面載入。
 require([module], callback);

2.CMD—是SeaJS在推廣過程中對模組定義的規範化產出,是一個同步模組定義,是SeaJS的一個標準,SeaJS是CMD概念的一個實現,SeaJS是淘寶團隊提供的一個模組開發的js框架
通過define()定義,沒有依賴前置,通過require載入jQuery外掛,CMD是依賴就近,在什麼地方使用到外掛就在什麼地方require該外掛,即用即返,這是一個同步的概念。

3.commonJS規範—是通過module.exports定義的,在前端瀏覽器裡面並不支援module.exports,通過node.js後端使用的。Nodejs端是使用CommonJS規範的,前端瀏覽器可以利用browserify外掛支援commonJS,可以講js檔案打包到一個main.js,所以不會出現瀏覽require新模組的時候,需要非同步載入的情況,更不會出現瀏覽器假死。
瀏覽器不相容CommonJS的根本原因,在於缺少四個Node.js環境的變數(module、exports、require、global)
輸出方式有2種:預設輸出—module export 和帶有名字的輸出—exports.area。

4.UMD-通用模組規範
既然CommonJs和AMD風格一樣流行,似乎缺少一個統一的規範。所以人們產生了這樣的需求,希望有支援兩種風格的“通用”模式,於是通用模組規範(UMD)誕生了。為了保證通用性,犧牲的易用性,這個模式略難看,但是它相容了AMD和CommonJS,同時還支援老式的“全域性”變數規範。

5.ES6模組化—export/import對模組進行匯出匯入的

相關文章