切圖崽的自我修養－SeaJs重要概念剖析

Taste 發布于2019-08-19 18:44 / 2240人閱讀

摘要：但是這么多模塊合并在一個文件里，全是匿名的話，系統如何區別哪個是哪個模塊呢因此，我們需要對這些模塊給不同的進行標識。

前言

高能預警，前方山路十八彎

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

CommonJs 同步加載模塊規范

AMD/CMD 異步加載模塊規范

其中CMD規范的產出是國內目前十分火爆的SeaJs, 這篇文章主要是解釋幾個使用SeaJs會碰到的重要概念

具名模塊

匿名模塊

路徑即ID原則

匿名模塊

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

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

具名模塊

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

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

其中可以

第一個參數定義該模塊的名字(即ID),用來唯一標識該模塊

第二個參數把該模塊依賴的模塊從函數體里提到參數中，用來標識該模塊還依賴了哪些模塊

第三個參數模塊主體

為什么需要具名模塊?

誠然，我們可以把所有模塊都以匿名的形式書寫。但這樣有個很大的缺點，就是模塊化會導致Js文件特別多，這樣無形中會加大了http請求的數
我們在知道，在文件比較小的時候, 文件的大小并不顯著影響http的下載速度, 但是如果把這個文件拆成兩個文件下載，增加的一次http開銷確是很大的
所以，很多情況下我們需要把零碎的Js模塊進行合并成一個文件。但是這么多模塊合并在一個文件里，全是匿名的話，系統如何區別哪個是哪個模塊呢？因此，我們需要對這些模塊給不同的ID進行標識。于是這些帶了ID的模塊，就叫做具名模塊

路徑即ID

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

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

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

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

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

根路徑(以根路徑開頭，比如/app/js/) 路徑以項目根目錄為起點

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

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

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

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

如果換一種形式寫:

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

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

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

現在拿例1來說:

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

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

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

現在拿例2來說:

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

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

又由于alias中具名模塊(../js/lib/jquery)的采用了相對路徑的方式, 根據路徑即ID的原則，你應該可以順著 index.html當前位置 + (../js/lib/jquery) 找到該具名模塊的位置,如果找不到，肯定會報錯

實際使用

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

grunt-cmd-transport 將匿名模塊轉換成具名模塊

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

結語

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

云服務器 GPU云服務器切圖崽圖像識別數學修養 SeaJs seajs cdn

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79929.html

切圖崽的自我修養－SeaJs重要概念剖析

摘要：但是這么多模塊合并在一個文件里，全是匿名的話，系統如何區別哪個是哪個模塊呢因此，我們需要對這些模塊給不同的進行標識。前言高能預警，前方山路十八彎在上一篇文章里簡單的討論了一下模塊化Js, 先來回顧一下目前模塊化的兩大規范: CommonJs 同步加載模塊規范 AMD/CMD 異步加載模塊規范其中CMD規范的產出是國內目前十分火爆的SeaJs, 這篇文章主要是解釋幾個使用S...

voidking 2019-08-29 10:58 評論0 收藏0
切圖崽的自我修養－SeaJs重要概念剖析

摘要：但是這么多模塊合并在一個文件里，全是匿名的話，系統如何區別哪個是哪個模塊呢因此，我們需要對這些模塊給不同的進行標識。前言高能預警，前方山路十八彎在上一篇文章里簡單的討論了一下模塊化Js, 先來回顧一下目前模塊化的兩大規范: CommonJs 同步加載模塊規范 AMD/CMD 異步加載模塊規范其中CMD規范的產出是國內目前十分火爆的SeaJs, 這篇文章主要是解釋幾個使用S...

jhhfft 2019-08-01 15:27 評論0 收藏0
切圖崽的自我修養－使用模塊化JS

摘要：之前的閉包也好，自執行函數也好，都是模塊化的一些嘗試，直到規范推出之后，模塊化才真正迅猛發展起來。因為有了模塊化的概念，才有了按需加載的概念。前言我們來玩樂高積木吧模塊化Js已經成為了老生常談，不過在JavaScript設計之初，由于定位的問題并沒有提供類的功能，開發者需要模擬出類似的功能，來隔離、組織復雜的JavaScript代碼。之前的閉包也好，自執行函數也好，都是模塊化的一...

littleGrow 2019-08-19 18:43 評論0 收藏0
切圖崽的自我修養－使用模塊化JS

摘要：之前的閉包也好，自執行函數也好，都是模塊化的一些嘗試，直到規范推出之后，模塊化才真正迅猛發展起來。因為有了模塊化的概念，才有了按需加載的概念。前言我們來玩樂高積木吧模塊化Js已經成為了老生常談，不過在JavaScript設計之初，由于定位的問題并沒有提供類的功能，開發者需要模擬出類似的功能，來隔離、組織復雜的JavaScript代碼。之前的閉包也好，自執行函數也好，都是模塊化的一...

justjavac 2019-08-01 15:27 評論0 收藏0
切圖崽的自我修養－使用自動化工具

摘要：前言已爛想來大家對自動化構建工具已經不陌生了，自動化構建工具可以幫開發者省去很多重復勞動比如語法糾錯文件打包文件操作，合并壓縮等等常用的自動化構建工具有等等，這些構建工具核心都是依賴第三方插件，通過顆粒化任務，再將這些任務按照合適的方式進行前言 F5已爛 showImg(https://segmentfault.com/img/bVyS47); 想來大家對自動化構建工具已經不陌生了，...

jayce 2019-08-29 10:58 評論0 收藏0