成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

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

jhhfft / 1514人閱讀

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

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

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

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

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

其中CMD規(guī)范的產(chǎn)出是國(guó)內(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),用來(lái)唯一標(biāo)識(shí)該模塊

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

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

為什么需要具名模塊?

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

路徑即ID

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

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

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

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

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

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

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

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

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

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

如果換一種形式寫(xiě):

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來(lái)說(shuō):

既然alias中具名模塊叫l(wèi)ib/jquery, 那么你的jquery通過(guò)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來(lái)說(shuō):

既然alias中具名模塊叫../js/lib/jquery, 那么你的jquery通過(guò)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ì)去寫(xiě)具名模塊， 而是全部寫(xiě)匿名模塊
然后通過(guò)自動(dòng)化構(gòu)建工具(比如grunt,gulp,fis3)的插件去自動(dòng)解決匿名模塊具名化的問(wèn)題，比如grunt就提供了相關(guān)插件:

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

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

結(jié)語(yǔ)

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/49920.html

相關(guān)文章

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

    摘要：但是這么多模塊合并在一個(gè)文件里，全是匿名的話，系統(tǒng)如何區(qū)別哪個(gè)是哪個(gè)模塊呢因此，我們需要對(duì)這些模塊給不同的進(jìn)行標(biāo)識(shí)。 前言 高能預(yù)警，前方山路十八彎 在上一篇文章里簡(jiǎn)單的討論了一下模塊化Js, 先來(lái)回顧一下目前模塊化的兩大規(guī)范: CommonJs 同步加載模塊規(guī)范 AMD/CMD 異步加載模塊規(guī)范 其中CMD規(guī)范的產(chǎn)出是國(guó)內(nèi)目前十分火爆的SeaJs, 這篇文章主要是解釋幾個(gè)使用S...

    voidking 評(píng)論0 收藏0

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

    摘要：但是這么多模塊合并在一個(gè)文件里，全是匿名的話，系統(tǒng)如何區(qū)別哪個(gè)是哪個(gè)模塊呢因此，我們需要對(duì)這些模塊給不同的進(jìn)行標(biāo)識(shí)。 前言 高能預(yù)警，前方山路十八彎 在上一篇文章里簡(jiǎn)單的討論了一下模塊化Js, 先來(lái)回顧一下目前模塊化的兩大規(guī)范: CommonJs 同步加載模塊規(guī)范 AMD/CMD 異步加載模塊規(guī)范 其中CMD規(guī)范的產(chǎn)出是國(guó)內(nèi)目前十分火爆的SeaJs, 這篇文章主要是解釋幾個(gè)使用S...

    Taste 評(píng)論0 收藏0

  • 切圖崽的自我修養(yǎng)－使用模塊化JS

    摘要：之前的閉包也好，自執(zhí)行函數(shù)也好，都是模塊化的一些嘗試，直到規(guī)范推出之后，模塊化才真正迅猛發(fā)展起來(lái)。因?yàn)橛辛四K化的概念，才有了按需加載的概念。 前言 我們來(lái)玩樂(lè)高積木吧 模塊化Js已經(jīng)成為了老生常談，不過(guò)在JavaScript設(shè)計(jì)之初，由于定位的問(wèn)題并沒(méi)有提供類(lèi)的功能，開(kāi)發(fā)者需要模擬出類(lèi)似的功能，來(lái)隔離、組織復(fù)雜的JavaScript代碼。之前的閉包也好，自執(zhí)行函數(shù)也好，都是模塊化的一...

    littleGrow 評(píng)論0 收藏0

  • 切圖崽的自我修養(yǎng)－使用模塊化JS

    摘要：之前的閉包也好，自執(zhí)行函數(shù)也好，都是模塊化的一些嘗試，直到規(guī)范推出之后，模塊化才真正迅猛發(fā)展起來(lái)。因?yàn)橛辛四K化的概念，才有了按需加載的概念。 前言 我們來(lái)玩樂(lè)高積木吧 模塊化Js已經(jīng)成為了老生常談，不過(guò)在JavaScript設(shè)計(jì)之初，由于定位的問(wèn)題并沒(méi)有提供類(lèi)的功能，開(kāi)發(fā)者需要模擬出類(lèi)似的功能，來(lái)隔離、組織復(fù)雜的JavaScript代碼。之前的閉包也好，自執(zhí)行函數(shù)也好，都是模塊化的一...

    justjavac 評(píng)論0 收藏0

  • 切圖崽的自我修養(yǎng)－使用自動(dòng)化工具

    摘要：前言已爛想來(lái)大家對(duì)自動(dòng)化構(gòu)建工具已經(jīng)不陌生了，自動(dòng)化構(gòu)建工具可以幫開(kāi)發(fā)者省去很多重復(fù)勞動(dòng)比如語(yǔ)法糾錯(cuò)文件打包文件操作，合并壓縮等等常用的自動(dòng)化構(gòu)建工具有等等，這些構(gòu)建工具核心都是依賴(lài)第三方插件，通過(guò)顆?；蝿?wù)，再將這些任務(wù)按照合適的方式進(jìn)行 前言 F5已爛 showImg(https://segmentfault.com/img/bVyS47); 想來(lái)大家對(duì)自動(dòng)化構(gòu)建工具已經(jīng)不陌生了，...

    jayce 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<