一、CommonJS（同步加載模塊）

允許模塊通過require方法來同步加載所要依賴的其他模塊，然后通過exports或者module.exports來導出需要暴露的接口。

使用方式：

//導入 require('module'); require('../app.js'); //導出 exports.getInfo=function(){}; module.exports=someValue;

CommonJS必須在node環境下才能使用，而瀏覽器是不支持CommonJS的，必須使用一些轉換工具，將我們服務器端的CommonJS語法轉化為瀏覽器識別的語句。

?

二、AMD

Common為服務器端而生，采用同步加載的方式，因此不適用瀏覽器。

AMD規范則是異步加載模塊，允許指定回調函數，等模塊異步加載完成后即可調用回調函數。

AMD的核心思想是通過define來定義一個模塊，然后使用require來加載模塊。

使用方式：

//Math.js define([], function(){return {'add': function(a, b) {return a + b;}} }) //main.js require.config({paths : {"math" : "Math"} }); require(['math'], function (math) {console.log(math.add(2, 3)); }); console.log('done'); //done //5

?

三、CMD

CMD跟AMD的主要區別在于:

（1）對于以來的模塊，AMD是提前執行，提前加載依賴，CMD是延遲執行；

（2）AMD推崇依賴前置，而CMD推崇依賴就近，按需加載。

?

四、ES6

ES6自帶模塊化，可以使用import關鍵字引入模塊，通過export關鍵字導出模塊，但由于ES6目前無法在瀏覽器中執行，所以只能通過babel將不被支持的import編譯成當前受到廣泛支持的require。

?

ES6和CommonJS模塊的差異

（1）CommonJS模塊輸出的是一個值的拷貝，ES6模塊輸出的是值得引用；

　　　CommonJS對于基本數據類型，屬于復制，同時在另一個模塊可以對該模塊輸出的變量重新復制；

　　　　　　　　對于復雜數據類型，屬于淺拷貝，由于兩個模塊引用的對象指向同一內存空間，因此對該模塊的值做修改會影響另一個模塊；

　　　ES6模塊中的值屬于【動態只讀引用】

對于只讀來說，即不允許修改引入變量的值，import的變量是只讀的，不論是基本數據類型還是復雜數據類型。當模塊遇到import命令時，就會生成一個只讀引用。等到腳本真正執行時，再根據這個只讀引用，到被加載的那個模塊里面去取值。

對于動態來說，原始值發生變化，import加載的值也會發生變化。不論是基本數據類型還是復雜數據類型。

（2）CommonJS模塊是在運行時加載，而ES6模塊是在編譯時輸出接口。因為CommonJS加載的是一個對象（module.exports屬性），該對象只有在腳本運行完才會生成；而ES6模塊不是一個對象，他的對外接口只是一種靜態定義，在代碼靜態解析階段就會生成。

轉載于:https://www.cnblogs.com/xiaoan0705/p/11250914.html

總結

以上是生活随笔為你收集整理的前端模块化CommonJSES6的全部內容，希望文章能夠幫你解決所遇到的問題。

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