首頁  >  文章  >  web前端  >  JavaScript 模組化簡述

JavaScript 模組化簡述

阿神
阿神原創
2017-02-03 17:48:011236瀏覽

前言

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

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


JavaScript 基礎

做客戶端的同學對 OC 的 #import "classname"、Swift 的 Modpackule 的檔案不會修飾符。我們習慣了引用一個檔案就是引用一個類別的模式。然而在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(&#39;hello&#39;);
    p.innerHTML = &#39;Hello bestswifter&#39;;
}

HTML 中的<script> 標籤可以理解為import,這樣按鈕的onclick 事件就可以調用定義在index.js 中的onPress 函數了。 </script>

假設隨著專案的發展,我們發現點擊後的文字需要動態生成,並且由別的 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(&#39;hello&#39;);
    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(&#39;hello&#39;);
    p.innerHTML = add(1, 2);
}

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


初步模組化

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

1.index.

剛剛所說的痛點其實可以分為兩種:H js 中無法對add 方法的來源做區分,缺少命名空間的概念

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

//index.js 
function onPress() {
    var p = document.getElementById(&#39;hello&#39;);
    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(&#39;hello&#39;);
    // 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([&#39;myModule1&#39;, &#39;myModule2&#39;], 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(&#39;foo&#39;); // 同步
    foo.add(1, 2); 
    ...
    require.async(&#39;math&#39;, 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 关键字,将来代码的改动会非常小。


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn