JS中的模塊機制

模塊機制

JavaScript的模塊機制實際上是借鑑的其餘程序設計語言的。JavaScript在設計之初並無提供相似模塊的功能，隨後在ES5時代出現了各類模擬相似的功能模範，而且在ES6中新增了模塊機制。模塊機制就是將邏輯上相關的代碼組織到同一個包內，包內是一個相對獨立的做用域，不用擔憂命名衝突等等, 當須要在外部使用時直接import相應的package便可。

無模塊化的缺陷

• 污染全局做用域
• 維護成本高
• 依賴關係不明顯

CommonJS(NodeJS)

CommonJS：通用模塊規範，由NodeJS實現。根據CommonJS規範, 一個單獨的文件就是一個模塊。每個模塊都是一個單獨的做用域, 也就是說, 在該模塊內部定義的變量, 沒法被其餘模塊讀取, 除非定義爲global(瀏覽器中爲window)對象的屬性。

//模塊定義 myModule.js
var name = 'Byron';
function printName(){
    console.log(name);
}
function printFullName(firstName){
    console.log(firstName + name);
}
module.exports = {
    printName: printName,
    printFullName: printFullName
}
//加載模塊
var myModule = require('./myModule.js');
myModule.printName();

AMD（RequireJS）

AMD:Asynchronous Module Definition(異步模塊定義), 在瀏覽器端模塊化開發的規範, 不是JavaScript原生支持, RequireJS是AMD規範的具體實現(嚴格上說是RequireJS的推廣中產生的AMD規範)。

// 定義模塊 myModule.js
define('myModule', ['dependency'], function(){
    var name = 'Byron';
    function printName(){
        console.log(name);
    }
    return {
        printName: printName
    };
});

// 加載模塊
require(['myModule'], function (my){
　 my.printName();
});

CMD（SeaJS）

CMD: Common Module Definition通用模塊定義, 由國內發展出來, SeaJS是其典型表明, 即SeaJS是經過瀏覽器對CMD的具體實現

// 定義模塊  myModule.js
define(function(require, exports, module) {
  var $ = require('jquery.js');
  var foo = require('foo');
  var out = foo.bar();
  $('div').addClass('active');
  module.exports = out;
});

// 加載模塊
seajs.use(['myModule.js'], function(my){

});

ES6模塊(import,export)

ES6在語言標準的層面上, 實現了模塊功能, 並且實現得至關簡單, 徹底能夠取代CommonJS和AMD規範, 是瀏覽器和服務器通用的模塊解決方案。

在ES6中每個模塊便是一個文件，在文件中定義的變量，函數，對象在外部是沒法獲取的。若是你但願外部能夠讀取模塊當中的內容，就必須使用export來對其進行暴露（輸出）。（嚴格模式）

導出：

export：能夠有多個，導出的數據在被引入時必須加{}

export default：一個文件中只能出現一次，引入時不須要{}

引入：import

//模塊定義 myModule.js
const name = 'Byron';
function printName(){
    console.log(name);
}
function printFullName(firstName){
    console.log(firstName + name);
}
const myModule = {
    printName: printName,
    printFullName: printFullName
};
export myModule;

//加載模塊
import myModule, { printFullName } from './myModule.js';
myModule.printName();
printFullName('Michael');

對比

	CommonJS	AMD	CMD	ES6模塊
適用於	服務端(node)	瀏覽器端	瀏覽器端（依賴就近、延遲執行）	服務端/瀏覽器端
如何使用	module.exports定義當前模塊對外輸出的接口；require加載模塊	define定義一個模塊；require加載一個模塊；require.config()指定引用路徑	define定義一個模塊；require加載一個模塊	export導出模塊；import引入模塊
加載方式	同步	異步/依賴前置、提早執行	異步/依賴就近、延遲執行	異步
優勢	解決了依賴、全局變量污染的問題	適合在瀏覽器環境中異步加載模塊、並行加載多個模塊	按需加載、節約開發成本	在瀏覽器和服務端都適用；編譯時便可完成模塊加載，效率更高
缺點	同步加載模式只適用於服務端；在瀏覽器端，限於網絡緣由，應使用異步加載	不能按需加載、開發成本大、影響用戶體驗