[JavaScript模塊演化簡史]摘要

來源於：https://zhuanlan.zhihu.com/p/26231889

 

 

# JavaScript 模塊化

早期的JavaScript並無模塊化解決方案。
隨着單頁應用與富客戶端的流行，出現了模塊化（Modularity）。

模塊化主要是解決

1. 代碼分割
2. 做用域隔離
3. 模塊之間的依賴管理
4. 發佈到生產環境時的自動化打包與處理

流行過的 JavaScript 模塊化解決方案包括但不限於

1. 直接聲明依賴（Directly Defined Dependences）
2. 命名空間（Namespace Pattern）
3. 模塊模式（Module Pattern）
4. 依賴分離定義（Detached Dependency Definitions）
5. 沙盒（Sandbox）
6. 依賴注入（Dependency Injection）
7. CommonJS、AMD、UMD
8. 標籤化模塊（Labeled Modules）
9. YModules
10. ES 2015 Modules

早期web開發中，很容易遇到的問題是**命名衝突（Name Collisions）**。

此外應用變大後

1. 沒法將全部代碼寫到單個JavaScript文件中
2. 手動引入全部腳本文件也是個問題
3. 特別是存在着模塊間依賴的問題

物極必反，過分碎片化的模塊一樣會帶來性能的損耗與包體尺寸的增大，這包括了

1. 模塊加載
2. 模塊解析
3. JavaScript 引擎優化失敗(由於 Webpack 等打包工具包裹模塊時封裝的過多 IIFE 函數致使的)


# 命名空間模式

1. 統一添加前綴，如myApp_address, myApp_validateUser()
2. 對象封裝，將全部相關變量封裝入全局對象中

對象封裝的缺點是

1. 大型多人協同項目的可維護性仍是較差
2. 沒有解決模塊間依賴管理的問題


# 依賴注入

依賴注入的核心思想在於某個模塊**不須要手動地初始化**某個依賴對象，而**只須要聲明**該依賴並由外部框架自動實例化該對象實現而且傳遞到模塊內。
Angular／Angular2／Slot中依賴注入是核心機制之一。


# CommonJS

主要包含`require` 與 `module` 這兩個關鍵字。

CommonJS 算是目前最流行的模塊格式，能夠應用在

1. Node.js
2. [Browserify**](http://browserify.org/)（客戶端）
3. [Webpack**](https://webpack.js.org/)（客戶端）

須要注意的是，**Node.js 中的模塊在加載以後是以單例化運行，而且遵循值傳遞原則**


# AMD(Asynchronous Module Definition)

實現了**異步加載模塊**。目的是**充分利用瀏覽器的併發加載能力**。
主要包含`require` 與 `define` 這兩個關鍵字。

> 隨着以 npm 爲主導的依賴管理機制的統一，愈來愈多的開發者放棄了使用 AMD 模式。


# UMD(Universal Module Definition)

同時支持 CommonJS 與 AMD 規範的模塊。


# ES2015 Modules

主要包含`import` 與 `export` 這兩個關鍵字。

> 咱們目前還不能直接保證在全部環境（特別是舊版本瀏覽器）中使用該規範，可是經過 Babel 等轉化工具能幫咱們自動處理向下兼容。

ES2015 Modules 仍是有些許被詬病的地方

1. 導入語句只能做爲模塊頂層的語句出現，不能出如今 function 裏面或是 if 裏面
2. 而且 import 語句會被提高到文件頂部執行，也就是說在模塊初始化的時候全部的 import 都必須已經導入完成
3. import 的模塊名只能是字符串常量，導入的值也是不可變對象

> 這些設計雖然使得靈活性不如 CommonJS 的 require，但卻保證了 ES6 Modules 的依賴關係是肯定（Deterministic）的，和運行時的狀態無關，從而也就保證了 ES6 Modules 是能夠進行可靠的靜態分析的。

瀏覽器中默認支持 ES2015 Modules的狀況請查看原文。