關於前端模組化 CommonJS、AMD、CMD、ES6中模組載入

noopyxu發表於2019-03-03
前端JS

寫在前面

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關鍵字匯入
  • 同步、非同步載入均可

相關文章