各類模塊化簡介及演變過程

 

第一階段 ： 無模塊化

---

 

說明：

簡單的將全部的js文件通通放在一塊兒。可是這些文件的順序還不能出錯，好比jquery須要先引入，才能引入jquery插件，才能在其餘的文件中使用jquery。

 

使用方法：

 

缺點：

• 污染全局做用域。 由於每個模塊都是暴露在全局的，簡單的使用，會致使全局變量命名衝突，固然，咱們也能夠使用命名空間的方式來解決。
• 對於大型項目，各類js不少，開發人員必須手動解決模塊和代碼庫的依賴關係，後期維護成本較高。
• 依賴關係不明顯，不利於維護。 好比main.js須要使用jquery，可是，從上面的文件中，咱們是看不出來的，若是jquery忘記了，那麼就會報錯。

 

 

第二階段： CommonJS規範

---

 

說明：

CommonJS就是一個JavaScript模塊化的規範。

• 每個文件就是一個模塊，其內部定義的變量是屬於這個模塊的，不會對外暴露，也就是說不會污染全局變量。
• 核心思想：

1. 經過 require 方法來同步加載所要依賴的其餘模塊，
2. 經過 module.exports 來導出須要暴露的接口

 

使用方法：

 

優勢：

在服務器端率先完成了JavaScript的模塊化，解決了依賴、全局變量污染的問題，這也是js運行在服務器端的必要條件

 

缺點：

• CommonJS 是同步加載模塊的，只有加載完成，才能執行後面的操做
• 因爲 CommonJS 是同步加載模塊的，在服務器端，文件都是保存在硬盤上，因此同步加載沒有問題，可是對於瀏覽器端，須要將文件從服務器端請求過來，那麼同步加載就不適用了，因此，CommonJS是不適用於瀏覽器端的。

 

 

第三階段： AMD規範

---

說明：

• 非同步加載模塊，容許指定回調函數。所以瀏覽器端通常採用AMD規範。
• AMD規範的實現：require.js

1. 定義模塊：define(id, [depends], callback)

第一個參數 id 爲字符串類型，表示了模塊標識，爲可選參數。若不存在則模塊標識應該默認定義爲在加載器中被請求腳本的標識。若是存在，那麼模塊標識必須爲頂層的或者一個絕對的標識。

第二個參數，dependencies ，是一個當前模塊依賴的，已被模塊定義的模塊標識的數組字面量。

第三個參數，factory，是一個須要進行實例化的函數或者一個對象。

2. 加載模塊：require([module], callback) 支持CommonJS的模塊導出方式

 

使用方法：

 

優勢：

• 適合在瀏覽器環境中異步加載模塊。
• 能夠並行加載多個模塊。

 

缺點：

• 提升了開發成本
• 不能按需加載，而是必須提早加載全部的依賴

 

 

第四階段： CMD規範

---

說明：

和requirejs很是相似，即一個js文件就是一個模塊，可是CMD的加載方式更加優秀，是經過按需加載的方式。\

 

使用方法：

 

優勢：

• 實現了瀏覽器端的模塊化加載。
• 能夠按需加載，依賴就近。

 

缺點：

　　依賴SPM打包，模塊的加載邏輯偏重。 

 

 

特殊存在： UMD規範

---

背景：

Modules/Wrappings是出於對NodeJS模塊格式的偏好而包裝下使其在瀏覽器中得以實現, 並且它的格式經過某些工具（如 r.js）也能運行在NodeJS中。事實上，這兩種格式同時有效且都被普遍使用。

AMD以瀏覽器爲第一（browser-first）的原則發展，選擇異步加載模塊。它的模塊支持對象（objects）、函數（functions）、構造器（constructors）、字符串（strings）、JSON等各類類型的模塊。所以在瀏覽器中它很是靈活。

CommonJS以服務器端爲第一（server-first）的原則發展，選擇同步加載模塊。它的模塊是無需包裝的（unwrapped modules）且貼近於ES.next/Harmony的模塊格式。但它僅支持對象類型（objects）模塊。 

這迫使一些人又想出另外一個更通用格式  UMD(Universal Module Definition)。但願提供一個先後端跨平臺的解決方案。

 

說明：

UMD的實現很簡單，先判斷是否支持NodeJS模塊格式（exports是否存在），存在則使用NodeJS模塊格式。

再判斷是否支持AMD（define是否存在），存在則使用AMD方式加載模塊。前兩個都不存在，則將模塊公開的全局（window或global）。

 

第五階段：ES6模塊化（推薦使用）

---

說明：

• ES6的模塊化方案是真正的規範
• 使用：

1. 引入模塊：使用 import
2. 導出模塊：經過 exprot

• 目前沒法在瀏覽器中執行，需經過babel將不被支持的import編譯爲當前受到普遍支持的 require

 

使用方法：

 

優勢：

和requir區別不大，可是推薦使用ES6，畢竟官方

 

缺點：

　　ES6目前沒法在瀏覽器中執行，因此，咱們只能經過babel將不被支持的import編譯爲當前受到普遍支持的 require 

 

 

 

	無模塊化	CommonJS規範	AMD規範	CMD規範	ES6模塊化
適用		服務端	瀏覽器端	瀏覽器端	瀏覽器端
加載方式		同步加載	異步加載、 模塊開始加載全部依賴	按需加載
實現庫			requireJs	seajs
來源		前端社區	前端社區	前端社區	官方
是否須要bebal編譯	否	否	否	否	是

 

 

AMD和CMD的區別

---

1. AMD 對於依賴的模塊提早執行, CMD延遲執行
2. AMD 推崇依賴前置， CMD推崇依賴就近，即只在須要用到某個模塊的時候再require

參考資料：

http://www.javashuo.com/article/p-zfeyviqw-ez.html

https://www.jianshu.com/p/09ffac7a3b2c