初學Web前端要注意什么 如何學好JS模塊化編程

初學Web前端要注意什么？如何學好JS模塊化編程？JavaScript是前端三要素之一，也是很多初學Web前端的人遭遇的第一條攔路虎。很多同學表示JavaScript涵蓋的知識點太多太復雜、應用也是五花八門完全摸不著頭腦。但只要我們一點一點由基礎到進階的學習，就一定能學好JavaScript，接下來千鋒小編就給大家分享有關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模塊化知識點，你可以選擇專業的學習。如果你想快速從基礎到高階、層層遞進的掌握前端開發人員所需的技能，可以選擇專業的學習，讓你高效率學習、畢業后輕松拿高薪!