JavaScript 模組化簡述

bestswifter發表於2017-01-25
JavaScript

前言

關於模組化，最直接的表現就是我們寫的 require 和 import 關鍵字，如果查閱相關資料，就一定會遇到 CommonJS 、CMD AMD 這些名詞，以及 RequireJS、SeaJS 等陌生框架。比如 SeaJS 的官網 這樣描述自己: “簡單友好的模組定義規範，Sea.js 遵循 CMD 規範。自然直觀的程式碼組織方式，依賴的自動載入……”

作為前端新手，我表示實在是一臉懵逼，理解不能。按照我一貫的風格，介紹一個東西之前總得解釋一下為什麼需要這個東西。

JavaScript 基礎

做客戶端的同學對 OC 的 #import "classname"、Swift 的 Module 以及檔案修飾符 和 Java 的 import package+class 模式應該都不陌生。我們習慣了引用一個檔案就是引用一個類的模式。然而在 JavaScript 這種動態語言中，事情又有一些變化，舉個例子說明:

<html>
  <head>
    <script type="text/javascript" src="index.js"></script>
  </head>

  <body>
    <p id="hello"> Hello Wrold </p>
    <input type="button" onclick="onPress()" value="Click me" />
  </body>
</html>複製程式碼
// index.js
function onPress() {
    var p = document.getElementById('hello');
    p.innerHTML = 'Hello bestswifter';
}複製程式碼

HTML 中的 <script> 標籤可以理解為 import，這樣按鈕的 onclick 事件就可以呼叫定義在 index.js 中的 onPress 函式了。

假設隨著專案的發展，我們發現點選後的文字需要動態生成，並且由別的 JS 檔案生成，那麼簡單的 index.js 就無法勝任了。我們假設生成的內容定義在 math.js 檔案中:

// math.js
function add(a, b) {
    return a + b;
}複製程式碼

按照客戶端的思維，此時的 index.js 檔案應該這樣寫:

// index.js
import "math.js"

function onPress() {
    var p = document.getElementById('hello');
    p.innerHTML = add(1, 2);
}複製程式碼

很不幸，JavaScript 並不支援 import 這種寫法，也就是說在一個 JS 檔案中根本無法引用別的 JS 檔案中的方法。正確的解決方案是在 index.js 中直接呼叫 add 方法，同時在 index.html 中引用 math.js:

<html>
  <head>
    <script type="text/javascript" src="index.js"></script>
    <script type="text/javascript" src="math.js"></script>
  </head>

  <body>
    <p id="hello"> Hello Wrold </p>
    <input type="button" onclick="onPress()" value="Click me" />
  </body>
</html>複製程式碼
// index.js
function onPress() {
    var p = document.getElementById('hello');
    p.innerHTML = add(1, 2);
}複製程式碼

可以看到這種寫法並不優雅， index.js 對別的 JS 檔案中的內容並沒有控制權，能否呼叫到 add 方法完全取決於使用自己的 HTML 檔案有沒有正確引用別的 JS 檔案。

初步模組化

剛剛所說的痛點其實可以分為兩種:

  1. index.js 無法 import，依賴於 HTML 的引用
  2. index.js 中無法對 add 方法的來源做區分，缺少名稱空間的概念

第一個問題留在後面解答，我們先著手解決第二個問題，比如先把函式放到一個物件中，這樣我們可以暴露一個物件，讓使用者呼叫這個物件的多個方法:

//index.js 
function onPress() {
    var p = document.getElementById('hello');
    p.innerHTML = math.add(1, 2);
}

//math.js
var math = {
    base: 0,
    add: function(a, b) {
        return a + b + base;
    },
};複製程式碼

可以看到在 index.js 中已經可以指定一個簡易版的名稱空間了(也就是 math)。但目前還有一個小問題，比如 base 這個屬性會被暴露給外界，也可以被修改。所以更好的方式是將 math 定義在一個閉包裡，從而隱藏內部屬性:

// math.js
var math = (function() {
    var base = 0;
    return {
        add: function(a, b) {
            return a + b + base;
        },
    };
})();複製程式碼

到目前為止，我們實現了模組的定義和使用。不過模組化的一大精髓在於名稱空間，也就是說我們希望自己的 math 模組不是全域性的，而是按需匯入，這樣一來，即使多個檔案暴露同名物件也不會出問題。就像 node.js 中那樣，需要暴露的模組定義自己的 export 內容，然後呼叫方使用 require 方法。

其實可以簡單模擬一下 node.js 的工作方式，通過增加一箇中間層來解決: 首先定義一個全域性變數:

// global.js
var module = {
    exports: {}, // 用來儲存所有暴露的內容
};複製程式碼

然後在 math.js 中暴露物件:

var math = (function() {
    var base = 0;
    return {
        add: function(a, b) {
            return a + b + base;
        },
    };
})();

module.exports.math = math;複製程式碼

使用者 index.js 現在應該是:

var math = module.exports.math;

function onPress() {
    var p = document.getElementById('hello');
    // math
    p.innerHTML = math.add(1, 2);
}複製程式碼

現有模組化方案

上述簡單的模組化方式有一些小問題。首先，index.js 必須嚴格依賴於 math.js 執行，因為只有 math.js 執行完才會向全域性的 module.export 中註冊自己。這就要求開發者必須手動管理 js 檔案的載入順序。隨著專案越來越大，依賴的維護會變得越來越複雜。

其次，由於載入 JS 檔案時，瀏覽器會停止渲染網頁，因此我們還需要 JS 檔案的非同步按需載入。

最後一個問題是，之前給出的簡化版模組化方案並沒有解決模組的名稱空間，相同的匯出依舊會替換掉之前的內容，而解決方案則是維護一個 “檔案路徑 <--> 匯出內容” 的表，並且根據檔案路徑載入。

基於上述需求，市場上出現了很多套模組化方案。為啥會有多套標準呢，實際上還是由前端的特性導致的。由於缺乏一個統一的標準，所以很多情況下大家做事的時候都是靠約定，就比如上述的 export 和 require。如果程式碼的提供者把匯出內容儲存在 module.exports 裡，而使用者讀取的是 module.export，那自然是徒勞的。不僅如此，各個規範的實現方式、使用場景也不盡相同。

CommonJS

比較知名的規範有 CommonJS、AMD 和 CMD。而知名框架 Node.js、RequireJS 和 Seajs 分別實現了上述規範。

最早的規範是 CommonJS，Node.js 使用了這一規範。這一規範和我們之前的做法比較類似，是同步載入 JS 指令碼。這麼做在服務端毫無問題，因為檔案都存在磁碟上，然而瀏覽器的特性決定了 JS 指令碼需要非同步載入，否則就會失去響應，因此 CommonJS 規範無法直接在瀏覽器中使用。

AMD

瀏覽器端著名的模組管理工具 Require.js 的做法是非同步載入，通過 Webworker 的 importScripts(url); 函式載入 JS 指令碼，然後執行當初註冊的回撥。Require.js 的寫法是:

require(['myModule1', 'myModule2'], function (m1, m2){
    // 主回撥邏輯
    m1.printName();
    m2.printName();
});複製程式碼

由於這兩個模組是非同步下載，因此哪個模組先被下載、執行並不確定，但可以肯定的是主回撥一定在所有依賴都被載入完成後才執行。

Require.js 的這種寫法也被稱為前置載入，在寫主邏輯之前必須指定所有的依賴，同時這些依賴也會立刻被非同步載入。

由 Require.js 引申出來的規範被稱為 AMD(Asynchronous Module Definition)。

CMD

另一種優秀的模組管理工具是 Sea.js，它的寫法是:

define(function(require, exports, module) {
    var foo = require('foo'); // 同步
    foo.add(1, 2); 
    ...
    require.async('math', function(math) { // 非同步
        math.add(1, 2);
    });
});複製程式碼

Sea.js 也被稱為就近載入，從它的寫法上可以很明顯的看到和 Require.js 的不同。我們可以在需要用到依賴的時候才申明。

Sea.js 遇到依賴後只會去下載 JS 檔案，並不會執行，而是等到所有被依賴的 JS 指令碼都下載完以後，才從頭開始執行主邏輯。因此被依賴模組的執行順序和書寫順序完全一致。

由 Sea.js 引申出來的規範被稱為 CMD(Common Module Definition)。

ES 6 模組化

在 ES6 中，我們使用 export 關鍵字來匯出模組，使用 import 關鍵字引用模組。需要說明的是，ES 6 的這套標準和目前的標準沒有直接關係，目前也很少有 JS 引擎能直接支援。因此 Babel 的做法實際上是將不被支援的 import 翻譯成目前已被支援的 require。

儘管目前使用 import 和 require 的區別不大(本質上是一回事)，但依然強烈推薦使用 import 關鍵字，因為一旦 JS 引擎能夠解析 ES 6 的 import 關鍵字，整個實現方式就會和目前發生比較大的變化。如果目前就開始使用 import 關鍵字，將來程式碼的改動會非常小。

參考

以上內容大部分都不是我的思考結果，我只是對已有的文章做了一下實際操作和歸納總結，感謝各位前輩的優秀文章:

  1. Can I access variables from another file?
  2. 淺談 JavaScript 模組化程式設計
  3. 前端模組化
  4. 詳解JavaScript模組化開發
  5. requireJS實現原理研究
  6. Javascript模組化程式設計（一）：模組的寫法
  7. Javascript模組化程式設計（二）：AMD規範
  8. 瀏覽器載入 CommonJS 模組的原理與實現
  9. Node中沒搞明白require和import，你會被坑的很慘

相關文章