前端模塊化CommonJS&ES6

模塊化的開發方式能夠提升代碼複用性，方便進行代碼管理。一般一個文件就是一個模塊，有本身的做用域，只對外暴露特定的變量和函數。目前比較流行的js模塊化規範有commonJS、AMD、CMD以及ES6的模塊系統。

1、CommonJS（同步加載模塊）

容許模塊經過require方法來同步加載所要依賴的其餘模塊，而後經過exports或者module.exports來導出須要暴露的接口。

使用方式：

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

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

 

2、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

 

3、CMD

CMD跟AMD的主要區別在於:

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

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

 

4、ES6

ES6自帶模塊化，能夠使用import關鍵字引入模塊，經過export關鍵字導出模塊，但因爲ES6目前沒法在瀏覽器中執行，因此只能經過babel將不被支持的import編譯成當前受到普遍支持的require。

 

ES6和CommonJS模塊的差別

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

　　　CommonJS對於基本數據類型，屬於複製，同時在另外一個模塊能夠對該模塊輸出的變量從新複製；

　　　　　　　　對於複雜數據類型，屬於淺拷貝，因爲兩個模塊引用的對象指向同一內存空間，所以對該模塊的值作修改會影響另外一個模塊；

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

1. 對於只讀來講，即不容許修改引入變量的值，import的變量是隻讀的，不管是基本數據類型仍是複雜數據類型。當模塊遇到import命令時，就會生成一個只讀引用。等到腳本真正執行時，再根據這個只讀引用，到被加載的那個模塊裏面去取值。
2. 對於動態來講，原始值發生變化，import加載的值也會發生變化。不管是基本數據類型仍是複雜數據類型。

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