WEB 前端模組化都有什麼?

黑金團隊發表於2018-11-21

前言

說到前端模組化,你第一時間能想到的是什麼?Webpack?ES6 Module?還有嗎?我們一起來看一下下圖。

模組化關鍵詞
相信大夥兒對上圖的單詞都不陌生,可能用過、看過或者是隻是聽過。那你能不能用一張圖梳理清楚上述所有詞彙之間的關係呢?我們日常編寫程式碼的時候,又和他們之間的誰誰誰有關係呢?

一、千絲萬縷

為了更貼合我們的日常開發場景(前後端分離),我們嘗試先從不同平臺的維度區分,作為本文的切入點。

1. 根據平臺劃分

平臺 規範 特性
瀏覽器 AMD、CMD 存在網路瓶頸,使用非同步載入
非瀏覽器 CommonJS 直接操作 IO,同步載入

可以看到我們非常暴力的以是不是瀏覽器作為劃分標準。仔細分析一下,他們之間最大的差異在於其特性上,是否存在瓶頸。 例如說網路效能瓶頸,每個模組的請求都需要發起一次網路請求,並等待資源下載完成後再進行下一步操作,那整個使用者體驗是非常糟糕的。 根據該場景,我們簡化一下,以同步載入和非同步載入兩個維度進行區分。

特性 規範
同步載入 CommonJS
非同步載入 AMD、CMD

2. AMD、CMD 兩大規範

先忽略 CommonJS,我們先介紹下,曾經一度盛行的 AMD、CMD 兩大規範。

規範 約束條件 代表作
AMD 依賴前置 requirejs
CMD 就近依賴 seajs

AMD、CMD 提供了封裝模組的方法,實現語法上相近,甚至於 requirejs 在後期也默默支援了 CMD 的寫法。我們用一個例子,來講清楚這兩個規範之間最大的差異:依賴前置和就近依賴。

AMD:

// hello.js
define(function() {
    console.log('hello init');
    return {
        getMessage: function() {
            return 'hello';
        }
    };
});
// world.js
define(function() {
    console.log('world init');
});

// main
define(['./hello.js', './world.js'], function(hello) {
    return {
        sayHello: function() {
            console.log(hello.getMessage());
        }
    };
});

// 輸出
// hello init
// world init
複製程式碼

CMD:

// hello.js
define(function(require, exports) {
    console.log('hello init');
    exports.getMessage = function() {
        return 'hello';
    };
});

// world.js
define(function(require, exports) {
    console.log('world init');
    exports.getMessage = function() {
        return 'world';
    };
});

// main
define(function(require) {
    var message;
    if (true) {
        message = require('./hello').getMessage();
    } else {
        message = require('./world').getMessage();
    }
});

// 輸出
// hello init
複製程式碼

結論: CMD 的輸出結果中,沒有列印"world init"。但是,需要注意的是,CMD 沒有列印"world init"並是不 world.js 檔案沒有載入。AMD 與 CMD 都是在頁面初始化時載入完成所有模組,唯一的區別就是就近依賴是當模組被 require 時才會觸發執行。

requirejs 和 seajs 的具體實現在這裡就不展開闡述了,有興趣的同學可以到官網瞭解一波,畢竟現在使用 requirejs 和 seajs 的應該很少了吧。

3. CommonJS

回到 CommonJS,寫過 NodeJS 的同學對它肯定不會陌生。CommonJS 定義了,一個檔案就是一個模組。在 node.js 的實現中,也給每個檔案賦予了一個 module 物件,這個物件包括了描述當前模組的所有資訊,我們嘗試列印 module 物件。

// index.js
console.log(module);

// 輸出
{
    id: '/Users/x/Documents/code/demo/index.js',
    exports: {},
    parent: { module }, // 呼叫該模組的模組,可以根據該屬性查詢呼叫鏈
    filename: '/Users/x/Documents/code/demo/index.js',
    loaded: false,
    children: [...],
    paths: [...]
}
複製程式碼

也就是說,在 CommonJS 裡面,模組是用物件來表示。我們通過“迴圈載入”的例子進行來加深瞭解。

// a.js
exports.x = 'a1';
console.log('a.js ', require('./b.js').x);
exports.x = 'a2';

//b.js
exports.x = 'b1';
console.log('b.js ', require('./a.js').x);
exports.x = 'b2';

//main
console.log('index.js', require('./a.js').x);

// 輸出
b.js  a1
a.js  b2
index.js  a2
複製程式碼

我們的理論依據是模組物件,根據該依據我們進行如下分析。

1、 a.js準備載入,在記憶體中生成module物件moduleA
2、 a.js執行exports.x = 'a1'; 在moduleA的exports屬性中新增x
3、 a.js執行console.log('a.js', require('./b.js').x); 檢測到require關鍵字,開始載入b.js,a.js執行暫停
4、 b.js準備載入,在記憶體中生成module物件moduleB
5、 b.js執行exports.x = 'b1'; 在moduleB的exports屬性中新增x
6、 b.js執行console.log('b.js', require('./a.js').x); 檢測到require關鍵字,開始載入a.js,b.js執行暫停
7、 檢測到記憶體中存在a.js的module物件moduleA,於是可以將第6步看成console.log('b.js', moduleA.x); 在第二步中moduleA.x賦值為a1,於是輸出b.js, a1
8、 b.js繼續執行,exports.x = 'b2',改寫moduleBexports的x屬性
9、 b.js執行完成,回到a.js,此時同理可以將第3步看成console.log('a.js', modulerB.x); 輸出了a.js, b2
10、 a.js繼續執行,改寫exports.x = 'a2'
11、 輸出index.js a2
複製程式碼

至此,“CommonJS 的模組,是一個物件。”這個概念大夥兒應該能理解吧?

回到這個例子,例子裡面還出現了一個保留字 exports。其實 exports 是指向 module.exports 的一個引用。舉個例子可以說明他們兩個之間的關係。

const myFuns = { a: 1 };
let moduleExports = myFuns;
let myExports = moduleExports;

// moduleExports 重新指向
moduleExports = { b: 2 };
console.log(myExports);
// 輸出 {a : 1}

// 也就是說在module.exports被重新複製時,exports與它的關係就gg了。解決方法就是重新指向
myExports = modulerExports;
console.log(myExports);
// 輸出 { b: 2 }
複製程式碼

4. ES6 module

對 ES6 有所瞭解的同志們應該都清楚,web 前端模組化在 ES6 之前,並不是語言規範,不像是其他語言 java、php 等存在名稱空間或者包的概念。上文提及的 AMD、CMD、CommonJS 規範,都是為了基於規範實現的模組化,並非 JavaScript 語法上的支援。 我們先簡單的看一個 ES6 模組化寫法的例子:

// a.js
export const a = 1;

// b.js
export const b = 2;

// main
import { a } from './a.js';
import { b } from './b.js';
console.log(a, b);
//輸出 1 2
複製程式碼

emmmm,沒錯,export 保留字看起來是不是和 CommonJS 的 exports 有點像?我們嘗試 下從保留字對比 ES6 和 CommonJS。

保留字 CommonJS ES6
require 支援 支援
export / import 不支援 支援
exports / module.exports 支援 不支援

好吧,除了 require 兩個都可以用之外,其他實際上還是有明顯差別的。那麼問題來了,既然 require 兩個都可以用,那這兩個在 require 使用上,有差異嗎?

我們先對比下 ES6 module 和 CommonJS 之間的差異。

模組輸出 載入方式
CommonJS 值拷貝 物件
ES6 引用(符號連結) 靜態解析

又多了幾個新穎的詞彙,我們先通過例子來介紹一下值拷貝和引用的區別。

// 值拷貝 vs 引用

// CommonJS
let a = 1;
exports.a = a;
exports.add = () => {
    a++;
};

const { add, a } = require('./a.js');
add();
console.log(a); // 1

// ES6
export const a = 1;
export const add = () => {
    a++;
};

import { a, add } from './a.js';
add();
console.log(a); // 2
// 顯而易見CommonJS和ES6之間,值拷貝和引用的區別吧。
複製程式碼

靜態解析,什麼是的靜態解析呢?區別於 CommonJS 的模組實現,ES6 的模組並不是一個物件,而只是程式碼集合。也就是說,ES6 不需要和 CommonJS 一樣,需要把整個檔案載入進去,形成一個物件之後,才能知道自己有什麼,而是在編寫程式碼的過程中,程式碼是什麼,它就是什麼。

PS:

  1. 目前各個瀏覽器、node.js 端對 ES6 的模組化支援實際上並不友好,更多實踐同志們有興趣可以自己搞一波。
  2. 在 ES6 中使用 require 字樣,靜態解析的能力將會丟失!

5. UMD

模組化規範中還有一個 UMD 也不得不提及一下。什麼是 UMD 呢?

UMD = AMD + CommonJS
複製程式碼

沒錯,UMD 就是這麼簡單。常用的場景就是當你封裝的模組需要適配不同平臺(瀏覽器、node.js),例如你寫了一個基於 Date 物件二次封裝的,對於時間的處理工具類,你想推廣給負責前端頁面開發的 A 同學和後臺 Node.js 開發的 B 同學使用,你是不是就需要考慮你封裝的模組,既能適配 Node.js 的 CommonJS 協議,也能適配前端同學使用的 AMD 協議?

二、工具時代

1. webpack

webpack 興起之後,什麼 AMD、CMD、CommonJS、UMD,似乎都變得不重要了。因為 webpack 的模組化能力真的強。

webpack 在定義模組上,可以支援 CommonJS、AMD 和 ES6 的模組宣告方式,換句話說,就是你的模組如果是使用 CommonJS、AMD 或 ES6 的語法寫的,webpack 都支援!我們看下例子:

//say-amd.js
define(function() {
    'use strict';
    return {
        sayHello: () => {
            console.log('say hello by AMD');
        }
    };
});
//say-commonjs.js
exports.sayHello = () => {
    console.log('say hello by commonjs');
};
//say-es6.js
export const sayHello = () => {
    console.log('say hello in es6');
};

//main
import { sayHello as sayInAMD } from './say-amd';
import { sayHello as sayInCommonJS } from './say-commonjs';
import { sayHello as sayInES6 } from './say-es6';

sayInAMD();
sayInCommonJS();
sayInES6();
複製程式碼

不僅如此,webpack 識別了你的模組之後,可以將其打包成 UMD、AMD 等等規範的模組重新輸出。例如上文提及到的你需要把 Date 模組封裝成 UMD 格式。只需要在 webpack 的 output 中新增 libraryTarget: 'UMD'即可。

2. more...

總結

回到開始我們提出的問題,我們嘗試使用一張圖彙總上文提及到的一溜模組化相關詞彙。

總結

@Author: _Jay

相關文章