AMD、CMD、CommonJS、ES6（import/export）

AMD、CMD、CommonJS是ES5模塊化解決方案

AMD —— 異步模塊

Asynchronous Module Definition
AMD推崇依賴前置，在定義模塊的時候就要聲明其依賴的模塊
requireJS主要解決兩個問題

1、多個js文件可能有依賴關系，被依賴的文件需要早于依賴它的文件加載到瀏覽器
2、js加載的時候瀏覽器會停止頁面渲染，加載文件越多，頁面失去響應時間越長

require()函數(shù)在加載依賴的函數(shù)的時候是異步加載的，這樣瀏覽器不會失去響應，它指定的回調函數(shù)，只有前面的模塊都加載成功后，才會運行，解決了依賴性的問題。

RequireJS

// 定義模塊 define(["a"], function(a) { return {}} ); // 使用模塊 require(['a'], function (a) {console.log(a) });

CMD —— 同步模塊

CMD推崇就近依賴，只有在用到某個模塊的時候再去require
CMD規(guī)范是國內發(fā)展出來的，就像AMD有個requireJS，CMD有個瀏覽器的實現(xiàn)SeaJS，SeaJS要解決的問題和requireJS一樣，只不過在模塊定義方式和模塊加載（可以說運行、解析）時機上有所不同

1.Sea.js 推崇一個模塊一個文件，遵循統(tǒng)一的寫法

2.CMD加載完某個模塊后沒有立即執(zhí)行而是等到遇到require語句的時再執(zhí)行。

seaJs

CommonJS —— 服務器端模塊

CommonJS 加載模塊是同步的，所以只有加載完成才能執(zhí)行后面的操作

AMD 與 CMD
1.對于依賴的模塊AMD是提前執(zhí)行，CMD是延遲執(zhí)行。不過RequireJS從2.0開始，也改成可以延遲執(zhí)行（根據(jù)寫法不同，處理方式不通過）。

2.AMD推崇依賴前置（在定義模塊的時候就要聲明其依賴的模塊），CMD推崇依賴就近（只有在用到某個模塊的時候再去require——按需加載）。

//AMD
define([’./a’,’./b’], function (a, b) {

//依賴一開始就寫好 a.test(); b.test();

});

//CMD
define(function (requie, exports, module) {

//依賴可以就近書寫 var a = require('./a'); a.test();... //軟依賴 if (status) {var b = requie('./b');b.test(); }

});
通俗來說：
AMD在加載完成定義（define）好的模塊就會立即執(zhí)行，所有執(zhí)行完成后，遇到require才會執(zhí)行主邏輯。（提前加載）
CMD在加載完成定義（define）好的模塊，僅僅是下載不執(zhí)行，在遇到require才會執(zhí)行對應的模塊。（按需加載）
AMD用戶體驗好，因為沒有延遲，CMD性能好，因為只有用戶需要的時候才執(zhí)行。

import/export ES6模塊化

在ES6中每一個模塊即是一個文件，在文件中定義的變量，函數(shù)，對象在外部是無法獲取的。如果你希望外部可以讀取模塊當中的內容，就必須使用export來對其進行暴露（輸出）。
ES6模塊：靜態(tài)加載（編譯時加載）
CommonJS 和 AMD 模塊：動態(tài)加載（運行時加載）
即 ES6 可以在編譯時就完成模塊加載，效率要比 CommonJS 模塊的加載方式高

ES6模塊的設計思想，是盡量的靜態(tài)化，使得編譯時就能確定模塊的依賴關系，以及輸入和輸出的變量
CommonJS 和 AMD 模塊，都只能在運行時確定這些東西

總結

以上是生活随笔為你收集整理的AMD、CMD、CommonJS、ES6（import/export）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。