前端模塊化（一）nodeJS中的CommonJS規(guī)范

Charlie_Jade 發(fā)布于2019-08-22 18:10 / 884人閱讀

摘要：要想讓模塊再次運(yùn)行，必須清除緩存。模塊加載的順序，按照其在代碼中出現(xiàn)的順序。最近參加了公司開(kāi)展的一次培訓(xùn)，結(jié)構(gòu)性思維培養(yǎng)。

序言

模塊化，大家用vue，react等東西，都會(huì)接觸到像exports，module.exports，export，export default，require，define，import等等字段，感覺(jué)很多人對(duì)于這些東西還是分不清，概念非常的模糊，便想著寫(xiě)這么一篇文章，一是幫助自己梳理知識(shí)點(diǎn)，二是跟大家一起成長(zhǎng)。其中有寫(xiě)得不對(duì)的，請(qǐng)及時(shí)提出來(lái) ，我及時(shí)更正。

剛開(kāi)始寫(xiě)的時(shí)候有些無(wú)從下手，一是因?yàn)橹R(shí)點(diǎn)太多，二是因?yàn)樽约旱慕?jīng)驗(yàn)還不足以幫助大家從深層次剖析js的模塊化中的區(qū)別，以及其實(shí)現(xiàn)原理、思想。這是一篇自己的學(xué)習(xí)筆記整理，我只能帶大家了解前端模塊化，區(qū)分他們并正確的使用他們。

先給大家扔出幾條知識(shí)：

CommonJS：NodeJS模塊系統(tǒng)具體實(shí)現(xiàn)的基石。

AMD：異步模塊規(guī)范，是RequireJS在推廣過(guò)程中對(duì)模塊定義的規(guī)范化產(chǎn)出的，推崇依賴前置；

UMD：兼容AMD和commonJS規(guī)范的同時(shí)，還兼容全局引用的方式；

CMD：是SeaJS 在推廣過(guò)程中對(duì)模塊定義的規(guī)范化產(chǎn)出的，推崇依賴就近；

ES6：ES6模塊的設(shè)計(jì)思想是盡量的靜態(tài)化，使得編譯時(shí)就能確定模塊的依賴關(guān)系，以及輸入和輸出的變量；

CommonJS規(guī)范

CommonJS官網(wǎng)上寫(xiě)道，它希望js不僅僅可以在瀏覽器上運(yùn)行，而是可以在任何地方運(yùn)行,使其具備開(kāi)發(fā)大型應(yīng)用的能力。

javascript: not just for browsers any more!

CommonJS定義的模塊分為:

模塊引用(require)

模塊定義(exports)

模塊標(biāo)識(shí)(module)

他可以做到：

服務(wù)器端JavaScript應(yīng)用程序

命令行工具

圖形界面應(yīng)用程序

混合應(yīng)用程序（如，Titanium或Adobe AIR）

CommonJS模塊的特點(diǎn)如下

所有代碼都運(yùn)行在模塊作用域，不會(huì)污染全局作用域。

模塊可以多次加載，但是只會(huì)在第一次加載時(shí)運(yùn)行一次，然后運(yùn)行結(jié)果就被緩存了，以后再加載，就直接讀取緩存結(jié)果。要想讓模塊再次運(yùn)行，必須清除緩存。

模塊加載的順序，按照其在代碼中出現(xiàn)的順序。

先談一談包的概念

前面給大家說(shuō)過(guò)，node.js是基于CommonJS的規(guī)范實(shí)現(xiàn)的，NPM大家一定都很熟悉，它實(shí)踐了CommonJS的包規(guī)范。

包規(guī)范

關(guān)于包規(guī)范，類(lèi)比于git倉(cāng)庫(kù)，我們可以這么理解:

git init在當(dāng)前文件夾中生成了隱藏文件.git，我們把它叫做git倉(cāng)庫(kù)。

npm init命令在當(dāng)前文件夾中生成了配置文件package.json，它描述了當(dāng)前這個(gè)包，我們管這個(gè)文件叫做包（概念不準(zhǔn)確，可以這么理解）。

包結(jié)構(gòu)

嚴(yán)格按照CommonJS規(guī)范來(lái)的話，包的目錄應(yīng)當(dāng)包含以下文件或目錄。

package.json：包描述文件，存在于包頂級(jí)目錄下

bin：存放可執(zhí)行二進(jìn)制文件的目錄

lib：存放js代碼的目錄

doc：存放文檔的目錄

test：存放單元測(cè)試用例代碼的目錄

而package.json則是一個(gè)配置文件，它描述了包的相關(guān)信息。

NodeJS模塊

既然node.js是基于CommonJS實(shí)現(xiàn)的，那么我們先來(lái)簡(jiǎn)單看看NodeJS的模塊原理。

最近參加了公司開(kāi)展的一次培訓(xùn)，結(jié)構(gòu)性思維培養(yǎng)。任何東西都能夠進(jìn)行分類(lèi)，事物一旦進(jìn)行分類(lèi)，更利于大家對(duì)此事物的認(rèn)知，也能方便大家記憶。所以我們先來(lái)看看Node的模塊分類(lèi)