關於前端模塊化 CommonJS、AMD、CMD、ES6中模塊加載

寫在前面

ES6以前，Javascript並無模塊體系。可是實際開發中，爲了更高效的開發，咱們須要模塊化編程開發，也就產生了幾類模塊化標準。

CommonJS（服務器端）

• 一個文件就是一個模塊，每一個模塊都是單獨的做用域，除非定義爲global對象的屬性
• 輸出模塊module.exports對象
• 加載模塊使用require方法
• 同步讀取模塊，適合nodejs，因爲網絡的緣由，並不適合瀏覽器端（異步加載）

異步加載模塊（瀏覽器端）

面對的問題

• 多個文件的依賴關係，被依賴的文件須要在依賴他的文件以前加載到瀏覽器
• js加載時，瀏覽器會中止頁面的渲染，加載的文件越多，頁面失去相應的時間越長

AMD（異步模塊定義）+ Require.js

其原理是異步加載模塊，模塊的加載不影響其後面語句的運行。全部以來這個模塊的語句都會添加進一個回調函數中，等到模塊加載完成，回調函數就會執行。

require([modlue], callback)讀取模塊

require.config配置別名，使用栗子：

//別名配置
requirejs.config({
    paths: {
        jquery: 'jquery.min' //能夠省略.js
    }
});
//引入模塊，用變量$表示jquery模塊
requirejs(['jquery'], function ($) {
    $('body').css('background-color','red');
});
複製代碼

define(id?, dependencies?, factory)定義模塊

• id：模塊名
• dependencies：當前模塊依賴的模塊
• factory：工廠方法，通常直接返回一個對象

define('math',['jquery'], function ($) {//引入jQuery模塊
    return {
        add: function(x,y){
            return x + y;
        }
    };
});
複製代碼

CMD（通用模塊定義）+ SeaJS

CMD和AMD解決的問題同樣，不過是模塊定義方式、模塊加載的時機不一樣

seajs示例：

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

// 加載模塊
seajs.use(['myModule.js'], function(my){
    var star= my.data;
    console.log(star);  //1
});
複製代碼

CMD & AMD間的區別

• AMD依賴前置，在定義模塊時就聲明其所要依賴的模塊
• CMD是按需加載依賴，在用到那個模塊再去require
• AMD在使用前就準備好，CMD是用到了再去準備模塊

ES6模塊（服務器&瀏覽器端通用）

具體使用參考潛入理解ES６－模塊化

• 靜態加載，編譯時肯定依賴關係
• 模塊輸出爲值得引用，CommonJS是值得拷貝
• 自動運行於嚴格模式之下
• export關鍵字導出
• import關鍵字導入
• 同步、異步加載都可