Web前端進階之JavaScript模組化程式設計知識

　　JavaScript是前端三要素之一，也是很多初學Web前端的人遭遇的第一條攔路虎。很多同學表示JavaScript涵蓋的知識點太多太複雜、應用也是五花八門完全摸不著頭腦。但只要我們一點一點由基礎到進階的學習，就一定能學好JavaScript，接下來小千就給大家分享Web前端學習進階中有關JavaScript模組化程式設計的知識。

　　模組是實現特定功能的一組方法，模組化是一種規範、一種約束，這種約束會大大提升開發效率。JS模組化思想是將每個JS檔案看作是一個模組，每個模組透過固定的方式引入，並且透過固定的方式向外暴露指定的內容。

　　模組化需要實現的功能

　　1.解決命名衝突。當程式碼達到一定規模，功能很多的時，命名衝突就會出現，模組化可以很好的解決命名衝突的問題。

　　2.實現依賴管理。當一個頁面要載入多個JS並且他們之際有些還有依賴關係，這時候就需要慎重仔細的排列這些JS的順序，以保證每個元件都能正常執行，而模組化之後就不用為此多費心思。

　　3.提高複用性和程式碼可讀性。一個功能為一個模組，每個模組相互獨立，互不影響，程式碼元件封裝可以重複利用，去除這個模組不影響其它的。

　 　JavaScript模組化發展

　　閉包與名稱空間

　　這是最容易想到的也是最簡便的解決方式，早在模組化概念提出之前很多人就已經使用閉包的方式來解決變數重名和汙染問題。這樣每個JS檔案都是使用IIFE包裹的，各個JS檔案分別在不同的詞法作用域中，相互隔離，最後透過閉包的方式暴露變數。每個閉包都是單獨一個檔案，每個檔案仍然透過script標籤的方式下載，標籤的順序就是模組的依賴關係。

　　物件導向開發

　　這種方法只是閉包方式的小改進，約束js檔案返回必須是物件，物件其實就是一些個方法和屬性的集合。這樣的優點：1)規範化輸出，更加統一的便於相互依賴和引用;2)使用‘類’的方式開發，便於後面的依賴進行擴充套件。本質上這種方法只是對閉包方法的規範約束，並沒有做什麼根本改動。

　　YUI

　　雅虎出品的一個工具，模組化管理只是一部分，其還具有JS壓縮、混淆、請求合併(合併資源需要server端配合)等效能最佳化的工具，可謂是現有JS模組化的鼻祖。透過YUI全域性物件去管理不同模組，所有模組都只是物件上的不同屬性，相當於是不同程式執行在作業系統上。

　 　CommonJs

　　2009年Nodejs釋出，Commonjs釋出之後，就成了Node裡面標準的模組化管理工具。同時Node還推出了npm包管理工具，npm平臺上的包均滿足Commonjs規範，隨著Node與npm的發展，Commonjs影響力也越來越大，並且促進了後面模組化工具的發展，具有里程碑意義的模組化工具。

　　 AMD和RequireJS

　　AMD是"Asynchronous Module Definition"的縮寫，意思就是"非同步模組定義"。它採用非同步方式載入模組，模組的載入不影響它後面語句的執行。所有依賴這個模組的語句，都定義在一個回撥函式中，等到所有依賴載入完成之後(前置依賴)，這個回撥函式才會執行。

　　RequireJs是JS模組化的工具框架，是AMD規範的具體實現。但是有意思的是，RequireJs誕生之後，推廣過程中產生的AMD規範。RequireJs的優點：1)動態並行載入js，依賴前置，無需再考慮js載入順序問題;2)核心還是注入變數的沙箱編譯，解決模組化問題;3)規範化輸入輸出，使用起來方便;4)對於不滿足AMD規範的檔案可以很好地相容。

　　CMD和SeaJs

　　CMD規範由國內(阿里)誕生，借鑑了Commonjs的規範與AMD規範，在兩者基礎上做了改進。特點：1)define定義模組、require載入模組、exports暴露變數;2)不同於AMD的依賴前置，CMD推崇依賴就近(需要的時候再載入);3)推崇api功能單一，一個模組幹一件事。

　　SeaJs是CMD規範的實現，跟RequireJs類似，CMD也是SeaJs推廣過程中誕生的規範。CMD借鑑了很多AMD和Commonjs優點，同樣SeaJs也對AMD和Commonjs做出了很多相容。

　　ES6中的模組化

　　ES6規範中終於將模組化納入JavaScript標準，從此JS模組化被官方扶正，也是未來JS的標準。ES6中的模組化在Commonjs的基礎上有所不同，增加了關鍵字import、export、default、as、from，而不是全域性物件。二者有兩點主要的區別：1)CommonJS模組輸出的是一個值的複製，ES6模組輸出的是值的引用;2)CommonJS模組是執行時載入，ES6模組是編譯時輸出介面。

　　想了解更多JavaScript模組化知識點，你可以關注小千，後期分享更多知識。

　　本文來自千鋒教育，轉載請註明出處。