JavaScript是前端三要素之一，也是很多初學(xué)Web前端的人遭遇的第一條攔路虎。很多同學(xué)表示JavaScript涵蓋的知識(shí)點(diǎn)太多太復(fù)雜、應(yīng)用也是五花八門(mén)完全摸不著頭腦。但只要我們一點(diǎn)一點(diǎn)由基礎(chǔ)到進(jìn)階的學(xué)習(xí)，就一定能學(xué)好JavaScript。接下來(lái)小千就給大家分享Web前端學(xué)習(xí)進(jìn)階中有關(guān)JavaScript模塊化編程的知識(shí)。

模塊是實(shí)現(xiàn)特定功能的一組方法，模塊化是一種規(guī)范、一種約束，這種約束會(huì)大大提升開(kāi)發(fā)效率。JS模塊化思想是將每個(gè)JS文件看作是一個(gè)模塊，每個(gè)模塊通過(guò)固定的方式引入，并且通過(guò)固定的方式向外暴露指定的內(nèi)容。

模塊化需要實(shí)現(xiàn)的功能

1.解決命名沖突。當(dāng)代碼達(dá)到一定規(guī)模，功能很多的時(shí)，命名沖突就會(huì)出現(xiàn)，模塊化可以很好的解決命名沖突的問(wèn)題。

2.實(shí)現(xiàn)依賴(lài)管理。當(dāng)一個(gè)頁(yè)面要加載多個(gè)JS并且他們之際有些還有依賴(lài)關(guān)系，這時(shí)候就需要慎重仔細(xì)的排列這些JS的順序，以保證每個(gè)組件都能正常運(yùn)行，而模塊化之后就不用為此多費(fèi)心思。

3.提高復(fù)用性和代碼可讀性。一個(gè)功能為一個(gè)模塊，每個(gè)模塊相互獨(dú)立，互不影響，代碼組件封裝可以重復(fù)利用，去除這個(gè)模塊不影響其它的。

JavaScript模塊化發(fā)展

閉包與命名空間

這是最容易想到的也是最簡(jiǎn)便的解決方式，早在模塊化概念提出之前很多人就已經(jīng)使用閉包的方式來(lái)解決變量重名和污染問(wèn)題。這樣每個(gè)JS文件都是使用IIFE包裹的，各個(gè)JS文件分別在不同的詞法作用域中，相互隔離，最后通過(guò)閉包的方式暴露變量。每個(gè)閉包都是單獨(dú)一個(gè)文件，每個(gè)文件仍然通過(guò)script標(biāo)簽的方式下載，標(biāo)簽的順序就是模塊的依賴(lài)關(guān)系。

面向?qū)ο箝_(kāi)發(fā)

這種方法只是閉包方式的小改進(jìn)，約束js文件返回必須是對(duì)象，對(duì)象其實(shí)就是一些個(gè)方法和屬性的集合。這樣的優(yōu)點(diǎn)：1)規(guī)范化輸出，更加統(tǒng)一的便于相互依賴(lài)和引用;2)使用‘類(lèi)’的方式開(kāi)發(fā)，便于后面的依賴(lài)進(jìn)行擴(kuò)展。本質(zhì)上這種方法只是對(duì)閉包方法的規(guī)范約束，并沒(méi)有做什么根本改動(dòng)。

YUI

雅虎出品的一個(gè)工具，模塊化管理只是一部分，其還具有JS壓縮、混淆、請(qǐng)求合并(合并資源需要server端配合)等性能優(yōu)化的工具，可謂是現(xiàn)有JS模塊化的鼻祖。通過(guò)YUI全局對(duì)象去管理不同模塊，所有模塊都只是對(duì)象上的不同屬性，相當(dāng)于是不同程序運(yùn)行在操作系統(tǒng)上。

CommonJs

2009年Nodejs發(fā)布，Commonjs發(fā)布之后，就成了Node里面標(biāo)準(zhǔn)的模塊化管理工具。同時(shí)Node還推出了npm包管理工具，npm平臺(tái)上的包均滿(mǎn)足Commonjs規(guī)范，隨著Node與npm的發(fā)展，Commonjs影響力也越來(lái)越大，并且促進(jìn)了后面模塊化工具的發(fā)展，具有里程碑意義的模塊化工具。

AMD和RequireJS

AMD是"Asynchronous Module Definition"的縮寫(xiě)，意思就是"異步模塊定義"。它采用異步方式加載模塊，模塊的加載不影響它后面語(yǔ)句的運(yùn)行。所有依賴(lài)這個(gè)模塊的語(yǔ)句，都定義在一個(gè)回調(diào)函數(shù)中，等到所有依賴(lài)加載完成之后(前置依賴(lài))，這個(gè)回調(diào)函數(shù)才會(huì)運(yùn)行。

RequireJs是JS模塊化的工具框架，是AMD規(guī)范的具體實(shí)現(xiàn)。但是有意思的是，RequireJs誕生之后，推廣過(guò)程中產(chǎn)生的AMD規(guī)范。RequireJs的優(yōu)點(diǎn)：1)動(dòng)態(tài)并行加載js，依賴(lài)前置，無(wú)需再考慮js加載順序問(wèn)題;2)核心還是注入變量的沙箱編譯，解決模塊化問(wèn)題;3)規(guī)范化輸入輸出，使用起來(lái)方便;4)對(duì)于不滿(mǎn)足AMD規(guī)范的文件可以很好地兼容。

CMD和SeaJs

CMD規(guī)范由國(guó)內(nèi)(阿里)誕生，借鑒了Commonjs的規(guī)范與AMD規(guī)范，在兩者基礎(chǔ)上做了改進(jìn)。特點(diǎn)：1)define定義模塊、require加載模塊、exports暴露變量;2)不同于AMD的依賴(lài)前置，CMD推崇依賴(lài)就近(需要的時(shí)候再加載);3)推崇api功能單一，一個(gè)模塊干一件事。

SeaJs是CMD規(guī)范的實(shí)現(xiàn)，跟RequireJs類(lèi)似，CMD也是SeaJs推廣過(guò)程中誕生的規(guī)范。CMD借鑒了很多AMD和Commonjs優(yōu)點(diǎn)，同樣SeaJs也對(duì)AMD和Commonjs做出了很多兼容。

ES6中的模塊化

ES6規(guī)范中終于將模塊化納入JavaScript標(biāo)準(zhǔn)，從此JS模塊化被官方扶正，也是未來(lái)JS的標(biāo)準(zhǔn)。ES6中的模塊化在Commonjs的基礎(chǔ)上有所不同，增加了關(guān)鍵字import、export、default、as、from，而不是全局對(duì)象。二者有兩點(diǎn)主要的區(qū)別：1)CommonJS模塊輸出的是一個(gè)值的拷貝，ES6模塊輸出的是值的引用;2)CommonJS模塊是運(yùn)行時(shí)加載，ES6模塊是編譯時(shí)輸出接口。

想了解更多JavaScript模塊化知識(shí)點(diǎn)，你可以關(guān)注小千，后期分享更多知識(shí)。

本文來(lái)自千鋒教育，轉(zhuǎn)載請(qǐng)注明出處。

總結(jié)

以上是生活随笔為你收集整理的Web前端进阶之JavaScript模块化编程知识的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。