前端模組化

《原始碼學習之前端模組化》

一、什麼是模組化

模組化並不是前端獨有的思想。模組化是一種自頂向下的過程，通過把乙個大的系統，逐步劃分為乙個個小的模組，這些模組內部封裝了一些特定的功能，通過約定的介面對外暴露。各個模組之間互不干擾，易於插拔。

模組化可以解耦**，更好地進行復用，每個模組之間互不影響，不用擔心變數汙染、命名衝突等問題，同時也有利於並行開發，提公升效率。

js最初是沒有模組化的。隨著前端應用越來越複雜，比如，當乙個html頁面要請求多個js檔案時，如何保證這些js檔案之間的變數互不干擾？為了解決諸如變數汙染、命名衝突的問題，js開始出現了一些模組化的方案，從2023年提出的閉包模組化，再到2023年的commonjs和amd，以及如今的es模組化。

二、為什麼需要模組化

模組化的好處可以總結為以下幾點：

三、原始碼中的模組化

在上述提到的amd和commonjs規範，對於模組化的定義不盡相同，在進行模組化時需要對不同環境進行相容處理。

3.1 amd

amd(asynchronous module definition)，非同步模組定義。在載入模組以及模組所依賴的其它模組時，amd都採用非同步載入的方式，避免模組載入阻塞網頁渲染。

amd作為乙個規範，只需定義其語法api，而不關心其實現。amd規範簡單到只有乙個api，即模組定義define函式：

define(name?, [dependencies]?, factory)

amd規範主要是針對前端瀏覽器的規範。

3.2 commonjs

commonjs規範規定，每個模組內部，module變數代表當前模組。這個變數是乙個物件，它的exports屬性（即module.exports）是對外的介面。載入某個模組，其實是載入該模組的module.exports屬性。

commonjs規範載入模組是同步載入的，也就是說，只有載入完成，才能執行後面的操作。

模組定義語法：

module.exports=factory()

commonjs主要是針對瀏覽器之外的js環境的規範。

3.3 vue原始碼解析之模組化

以vue2的原始碼為例，將原始碼摺疊後你會看到如下**：

這是乙個匿名自執行函式，這個匿名函式擁有獨立的作用域，既避免汙染外界**，也避免被外界**汙染。

如果需要用到外界的全域性變數，可以通過引數傳入，如圖中的this，這個this實際上是window物件，通過傳入this，使得window由全域性變數變為區域性變數，當在後面那個**塊中訪問this時，不需要將作用域鏈回退到頂層作用域，這樣可以更快的訪問window物件；將window作為引數傳入，也可以在壓縮**時進行優化。如：(function(a,b){})(window); // window 被優化為 a。

global即自執行傳進來的this引數，也就是window物件。

factory即傳進來的第二個引數，也就是後面那個匿名函式。

展開第乙個function可以看到如下**：

typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = global || self, global.vue = factory());

這段**的作用是檢測當前的執行環境支援哪種模組化規範，然後將vue模組化，其中exports是commonjs規範，define是amd的規範。

在原始碼中可以看到，factory()最後return的是乙個vue物件。

當檢測出為commonjs規範時，匯出vue物件的寫法為：

module.exports = factory()；

當檢測出為amd規範時，寫法為：

define(factory)。

為了更直觀，改寫一下這段**：

if(typeof exports === 'object' && typeof module !== 'undefined')else if(typeof define === 'function' && define.amd)else

前端模組化

前端模組化

前端模組化

前端模組化

相關推薦