1 引言

如今，Javascript 模塊化規(guī)范非常方便、自然，但這個(gè)新規(guī)范僅執(zhí)行了2年，就在 4 年前，js 的模塊化還停留在運(yùn)行時(shí)支持，10 年前，通過后端模版定義、注釋定義模塊依賴。對(duì)經(jīng)歷過來的人來說，歷史的模塊化方式還停留在腦海中，反而新上手的同學(xué)會(huì)更快接受現(xiàn)代的模塊化規(guī)范。

但為什么要了解 Javascript 模塊化發(fā)展的歷史呢？因?yàn)榉彩露加袃擅嫘?#xff0c;了解 Javascript 模塊化規(guī)范，有利于我們思考出更好的模塊化方案，縱觀歷史，從 1999 年開始，模塊化方案最多維持兩年，就出現(xiàn)了新的替代方案，比原有的模塊化更清晰、強(qiáng)壯，我們不能被現(xiàn)代模塊化方式限制住思維，因?yàn)楝F(xiàn)在的 ES2015 模塊化方案距離發(fā)布也僅僅過了兩年。

2 內(nèi)容概要

直接定義依賴 (1999): 由于當(dāng)時(shí) js 文件非常簡(jiǎn)單，模塊化方式非常簡(jiǎn)單粗暴 —— 通過全局方法定義、引用模塊。這種定義方式與現(xiàn)在的 commonjs 非常神似，區(qū)別是 commonjs 以文件作為模塊，而這種方法可以在任何文件中定義模塊，模塊不與文件關(guān)聯(lián)。

閉包模塊化模式 (2003): 用閉包方式解決了變量污染問題，閉包內(nèi)返回模塊對(duì)象，只需對(duì)外暴露一個(gè)全局變量。

模版依賴定義 (2006): 這時(shí)候開始流行后端模版語法，通過后端語法聚合 js 文件，從而實(shí)現(xiàn)依賴加載，說實(shí)話，現(xiàn)在 go 語言等模版語法也很流行這種方式，寫后端代碼的時(shí)候不覺得，回頭看看，還是掛在可維護(hù)性上。

注釋依賴定義 (2006): 幾乎和模版依賴定義同時(shí)出現(xiàn)，與 1999 年方案不同的，不僅僅是模塊定義方式，而是終于以文件為單位定義模塊了，通過 lazyjs 加載文件，同時(shí)讀取文件注釋，繼續(xù)遞歸加載剩下的文件。

外部依賴定義 (2007): 這種定義方式在 cocos2d-js 開發(fā)中普遍使用，其核心思想是將依賴抽出單獨(dú)文件定義，這種方式不利于項(xiàng)目管理，畢竟依賴抽到代碼之外，我是不是得兩頭找呢？所以才有通過 webpack 打包為一個(gè)文件的方式暴力替換為 commonjs 的方式出現(xiàn)。

Sandbox模式 (2009): 這種模塊化方式很簡(jiǎn)單，暴力，將所有模塊塞到一個(gè) sanbox 變量中，硬傷是無法解決明明沖突問題，畢竟都塞到一個(gè) sandbox 對(duì)象里，而 Sandbox 對(duì)象也需要定義在全局，存在被覆蓋的風(fēng)險(xiǎn)。模塊化需要保證全局變量盡量干凈，目前為止的模塊化方案都沒有很好的做到這一點(diǎn)。

依賴注入 (2009): 就是大家熟知的 angular1.0，依賴注入的思想現(xiàn)在已廣泛運(yùn)用在 react、vue 等流行框架中。但依賴注入和解決模塊化問題還差得遠(yuǎn)。

CommonJS (2009): 真正解決模塊化問題，從 node 端逐漸發(fā)力到前端，前端需要使用構(gòu)建工具模擬。

Amd (2009): 都是同一時(shí)期的產(chǎn)物，這個(gè)方案主要解決前端動(dòng)態(tài)加載依賴，相比 commonJs，體積更小，按需加載。

Umd (2011): 兼容了 CommonJS 與 Amd，其核心思想是，如果在 commonjs 環(huán)境(存在 module.exports，不存在 define)，將函數(shù)執(zhí)行結(jié)果交給 module.exports 實(shí)現(xiàn) Commonjs，否則用 Amd 環(huán)境的 define，實(shí)現(xiàn) Amd。

Labeled Modules (2012): 和 Commonjs 很像了，沒什么硬傷，但生不逢時(shí)，碰上 Commonjs 與 Amd，那只有被人遺忘的份了。

YModules (2013): 既然都出了 Commonjs Amd，文章還列出了此方案，一定有其獨(dú)到之處。其核心思想在于使用 provide 取代 return，可以控制模塊結(jié)束時(shí)機(jī)，處理異步結(jié)果；拿到第二個(gè)參數(shù) module，修改其他模塊的定義(雖然很有拓展性，但用在項(xiàng)目里是個(gè)攪屎棍)。

ES2015 Modules (2015): 就是我們現(xiàn)在的模塊化方案，還沒有被瀏覽器實(shí)現(xiàn)，大部分項(xiàng)目已通過 babel 或 typescript 提前體驗(yàn)。

3 精讀

從語言層面到文件層面的模塊化

從 1999 年開始，模塊化探索都是基于語言層面的優(yōu)化，真正的革命從 2009 年 CommonJS 的引入開始，前端開始大量使用預(yù)編譯。

這篇文章所提供的模塊化歷史的方案都是邏輯模塊化，從 CommonJS 方案開始前端把服務(wù)端的解決方案搬過來之后，算是看到標(biāo)準(zhǔn)物理與邏輯統(tǒng)一的模塊化。但之后前端工程不得不引入模塊化構(gòu)建這一步。正是這一步給前端開發(fā)無疑帶來了諸多的不便，尤其是現(xiàn)在我們開發(fā)過程中經(jīng)常為了優(yōu)化這個(gè)工具帶了很多額外的成本。

從 CommonJS 之前其實(shí)都只是封裝，并沒有一套模塊化規(guī)范，這個(gè)就有些像類與包的概念。我在10年左右用的最多的還是 YUI2，YUI2 是用 namespace 來做模塊化的，但有很多問題沒有解決，比如多版本共存，因此后來 YUI3 出來了。

YUI().use('node', 'event', function (Y) { // The Node and Event modules are loaded and ready to use. // Your code goes here!});

YUI3 的 sandbox 像極了差不多同時(shí)出現(xiàn)的 AMD 規(guī)范，但早期 yahoo 在前端圈的影響力還是很大的，而 requirejs 到 2011 年才誕生，因此圈子不是用著 YUI 要不就自己封裝一套 sandbox，內(nèi)部使用 jQuery。

為什么模塊化方案這么晚才成型，可能早期應(yīng)用的復(fù)雜度都在后端，前端都是非常簡(jiǎn)單邏輯。后來 Ajax 火了之后，web app 概念的開始流行，前端的復(fù)雜度也呈指數(shù)級(jí)上漲，到今天幾乎和后端接近一個(gè)量級(jí)。工程發(fā)展到一定階段，要出現(xiàn)的必然會(huì)出現(xiàn)。

前端三劍客的模塊化展望

從 js 模塊化發(fā)展史，我們還看到了 css html 模塊化方面的嚴(yán)重落后，如今依賴編譯工具的模塊化增強(qiáng)在未來會(huì)被標(biāo)準(zhǔn)所替代。

原生支持的模塊化，解決 html 與 css 模塊化問題正是以后的方向。

再回到 JS 模塊化這個(gè)主題，開頭也說到是為了構(gòu)建 scope，實(shí)則提供了業(yè)務(wù)規(guī)范標(biāo)準(zhǔn)的輸入輸出的方式。但文章中的 JS 的模塊化還不等于前端工程的模塊化，Web 界面是由 HTML、CSS 和 JS 三種語言實(shí)現(xiàn)，不論是 CommonJS 還是 AMD 包括之后的方案都無法解決 CSS 與 HTML 模塊化的問題。

對(duì)于 CSS 本身它就是 global scope，因此開發(fā)樣式可以說是喜憂參半。近幾年也涌現(xiàn)把 HTML、CSS 和 JS 合并作模塊化的方案，其中 react/css-modules 和 vue 都為人熟知。當(dāng)然，這一點(diǎn)還是非常依賴于 webpack/rollup 等構(gòu)建工具，讓我們意識(shí)到在 browser 端還有很多本質(zhì)的問題需要推進(jìn)。

對(duì)于 css 模塊化，目前不依賴預(yù)編譯的方式是 styled-component，通過 js 動(dòng)態(tài)創(chuàng)建 class。而目前 css 也引入了與 js 通信的機(jī)制 與 原生變量支持。未來 css 模塊化也很可能是運(yùn)行時(shí)的，所以目前比較看好 styled-component 的方向。

對(duì)于 html 模塊化，小尤最近爆出與 chrome 小組調(diào)研 html Modules，如果 html 得到了瀏覽器，編輯器的模塊化支持，未來可能會(huì)取代 jsx 成為最強(qiáng)大的模塊化、模板語言。

對(duì)于 js 模塊化，最近出現(xiàn)的

總結(jié)

以上是生活随笔為你收集整理的js define函数_聊聊JS模块化发展历程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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