切圖崽的自我修養(yǎng)－SeaJs重要概念剖析

jhhfft 發(fā)布于2019-08-01 15:27 / 1492人閱讀

摘要：但是這么多模塊合并在一個(gè)文件里，全是匿名的話，系統(tǒng)如何區(qū)別哪個(gè)是哪個(gè)模塊呢因此，我們需要對(duì)這些模塊給不同的進(jìn)行標(biāo)識(shí)。

前言

高能預(yù)警，前方山路十八彎

在上一篇文章里簡(jiǎn)單的討論了一下模塊化Js, 先來回顧一下目前模塊化的兩大規(guī)范:

CommonJs 同步加載模塊規(guī)范

AMD/CMD 異步加載模塊規(guī)范

其中CMD規(guī)范的產(chǎn)出是國內(nèi)目前十分火爆的SeaJs, 這篇文章主要是解釋幾個(gè)使用SeaJs會(huì)碰到的重要概念

具名模塊

匿名模塊

路徑即ID原則

匿名模塊

SeaJs定義匿名模塊一般采用如下的方式:

define(function(require,exports,module){xx})

具名模塊

SeaJs定義除了定義匿名模塊，還可以定義具名模塊

//define(BlockID,[Deps],function(require,exports,module){})
 define(‘A’,[],function(require,exports,module){xx})

其中可以

第一個(gè)參數(shù) 定義該模塊的名字(即ID),用來唯一標(biāo)識(shí)該模塊

第二個(gè)參數(shù) 把該模塊依賴的模塊從函數(shù)體里提到參數(shù)中，用來標(biāo)識(shí)該模塊還依賴了哪些模塊

第三個(gè)參數(shù) 模塊主體

為什么需要具名模塊?

誠然，我們可以把所有模塊都以匿名的形式書寫。但這樣有個(gè)很大的缺點(diǎn)，就是模塊化會(huì)導(dǎo)致Js文件特別多，這樣無形中會(huì)加大了http請(qǐng)求的數(shù)
我們?cè)谥溃谖募容^小的時(shí)候, 文件的大小并不顯著影響http的下載速度, 但是如果把這個(gè)文件拆成兩個(gè)文件下載，增加的一次http開銷確是很大的
所以，很多情況下我們需要把零碎的Js模塊進(jìn)行合并成一個(gè)文件。但是這么多模塊合并在一個(gè)文件里，全是匿名的話，系統(tǒng)如何區(qū)別哪個(gè)是哪個(gè)模塊呢？因此，我們需要對(duì)這些模塊給不同的ID進(jìn)行標(biāo)識(shí)。于是這些帶了ID的模塊，就叫做具名模塊

路徑即ID

上面解釋了什么是具名模塊，為什么需要用具名模塊，我們現(xiàn)在就來給具名模塊命名

SeaJs遵循的是路徑即ID命名規(guī)則，意思就是具名模塊的ID名是路徑的一部分. 而沿著最終拼接出來的路徑，肯定可以找得到這個(gè)具名模塊

聽起來很繞，但這個(gè)規(guī)則非常非常非常重要.作者也是在理解SeaJs路徑的過程中踩坑無數(shù)，這里就來重點(diǎn)講一下
首先來看SeaJs的路徑的書寫種類，總的來說，可以分為3種.

相對(duì)路徑(以相對(duì)路徑符開頭，比如../js/), 路徑以本頁面為起點(diǎn)

直接路徑(以直接目錄開頭，比如js/), 路徑以baseUrl為起點(diǎn)

根路徑(以根路徑開頭，比如/app/js/) 路徑以項(xiàng)目根目錄為起點(diǎn)

這里拿入口文件index.html舉例:

base參數(shù)是以當(dāng)前頁面(index.html)為參照，設(shè)定基礎(chǔ)相對(duì)路徑baseUrl.
在本例中base設(shè)定采用相對(duì)路徑的形式，那么baseUrl ＝ (index.html的位置) ＋ (../js/)

alias能夠給具名模塊(例子中該匿名模塊ID為lib/jquery)取別名(JQ)，取別名的好處在于可以把具名模塊本身非常冗長的路徑命名變得很短很小清新，一般是針對(duì)頁面需要引用的庫文件.
在本例中JQ 后的路徑是采用直接路徑的形式，那么JQ的路徑＝ (baseUrl) + (lib/jquery) = (index.html的位置)+ (../js/) + (lib/jquery/)

sea.use用來指定SeaJS加載器的入口，通過在入口js再加載七七八八頁面所需的JS模塊達(dá)到按需加載的目的
在本例中，sea.use的路徑是采用直接路徑的形式，那么入口文件index.js的路徑＝ (baseUrl) + (src/index.js) = (index的位置) + (../js/) + (src/index.js)

如果換一種形式寫:

base設(shè)定采用相對(duì)路徑的形式，那么baseUrl = (index.html的位置) ＋ (../js/)

alias JQ 后的路徑是采用相對(duì)路徑的形式，那么JQ的路徑= (index.html的位置) ＋ (../js/lib/jquery)

sea.use的路徑是采用相對(duì)路徑的形式，那么入口文件index.js的路徑= (index.html的位置) + (../js/src/index.js)

現(xiàn)在拿例1來說:

既然alias中具名模塊叫l(wèi)ib/jquery, 那么你的jquery通過define定義的模塊ID一定是lib/jquery

define(‘lib/jquery’,[],function(require,exports,module){xx})

又由于alias中具名模塊(lib/jquery)的采用了直接路徑的方式, 根據(jù)路徑即ID的原則，你應(yīng)該可以順著 (baseUrl) + (lib/jquery) 找到該具名模塊的位置,如果找不到，肯定會(huì)報(bào)錯(cuò)

現(xiàn)在拿例2來說:

既然alias中具名模塊叫../js/lib/jquery, 那么你的jquery通過define定義的模塊ID一定是../js/lib/jquery

define(‘../js/lib/jquery’,[],function(require,exports,module){xx})

又由于alias中具名模塊(../js/lib/jquery)的采用了相對(duì)路徑的方式, 根據(jù)路徑即ID的原則，你應(yīng)該可以順著 index.html當(dāng)前位置 + (../js/lib/jquery) 找到該具名模塊的位置,如果找不到，肯定會(huì)報(bào)錯(cuò)

實(shí)際使用

但實(shí)際的使用上，我們基本不會(huì)去寫具名模塊，而是全部寫匿名模塊
然后通過自動(dòng)化構(gòu)建工具(比如grunt,gulp,fis3)的插件去自動(dòng)解決匿名模塊具名化的問題，比如grunt就提供了相關(guān)插件:

grunt-cmd-transport 將匿名模塊轉(zhuǎn)換成具名模塊

grunt-cmd-concat 將具名模塊合并壓縮到一個(gè)Js文件里

結(jié)語

SeaJs大法好，Grunt大法好但在使用這些工具的之時(shí)，并不是簡(jiǎn)單抄一兩個(gè)demo就完事. 很多情況下你要根據(jù)自己工程的特性來調(diào)整目錄結(jié)構(gòu)，而模塊所在的路徑，和模塊的ID, 和最后JS合并壓縮的過程息息相關(guān). 所以必須理解它們的規(guī)則，運(yùn)用起來才能更加得心應(yīng)手