JavaScript 模塊化簡析

時間 2020-08-04

原文原文鏈接

前言

關於模塊化，最直接的表現就是咱們寫的 require 和 import 關鍵字，若是查閱相關資料，就必定會遇到 CommonJS 、CMD AMD 這些名詞，以及 RequireJS、SeaJS 等陌生框架。好比 SeaJS 的官網這樣描述本身: 「簡單友好的模塊定義規範，Sea.js 遵循 CMD 規範。天然直觀的代碼組織方式，依賴的自動加載……」javascript

做爲前端新手，我表示實在是一臉懵逼，理解不能。按照我一向的風格，介紹一個東西以前總得解釋一下爲何須要這個東西。php

JavaScript 基礎

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

<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.jsfunction onPress() {    var p = document.getElementById('hello');
    p.innerHTML = 'Hello bestswifter';
}

HTML 中的 <script> 標籤能夠理解爲 import，這樣按鈕的 onclick 事件就能夠調用定義在 index.js 中的 onPress 函數了。前端

假設隨着項目的發展，咱們發現點擊後的文字須要動態生成，而且由別的 JS 文件生成，那麼簡單的 index.js 就沒法勝任了。咱們假設生成的內容定義在 math.js 文件中:java

// math.jsfunction add(a, b) {    return a + b;
}

按照客戶端的思惟，此時的 index.js 文件應該這樣寫:node

// index.jsimport "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:web

<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.jsfunction onPress() {    var p = document.getElementById('hello');
    p.innerHTML = add(1, 2);
}

能夠看到這種寫法並不優雅， index.js 對別的 JS 文件中的內容並無控制權，可否調用到 add 方法徹底取決於使用本身的 HTML 文件有沒有正確引用別的 JS 文件。編程

初步模塊化

剛剛所說的痛點其實能夠分爲兩種:swift

index.js 沒法 import，依賴於 HTML 的引用segmentfault
index.js 中沒法對 add 方法的來源作區分，缺乏命名空間的概念

第一個問題留在後面解答，咱們先着手解決第二個問題，好比先把函數放到一個對象中，這樣咱們能夠暴露一個對象，讓使用者調用這個對象的多個方法:

//index.js function onPress() {    var p = document.getElementById('hello');
    p.innerHTML = math.add(1, 2);
}//math.jsvar math = {
    base: 0,
    add: function(a, b) {        return a + b + base;
    },
};

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

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

到目前爲止，咱們實現了模塊的定義和使用。不過模塊化的一大精髓在於命名空間，也就是說咱們但願本身的 math 模塊不是全局的，而是按需導入，這樣一來，即便多個文件暴露同名對象也不會出問題。就像 node.js 中那樣，須要暴露的模塊定義本身的 export 內容，而後調用方使用 require 方法。

其實能夠簡單模擬一下 node.js 的工做方式，經過增長一箇中間層來解決: 首先定義一個全局變量:

// global.jsvar 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 關鍵字，未來代碼的改動會很是小。