seajs中模塊的解析規(guī)則詳解和模塊使用總結(jié)
seajs github 模塊標(biāo)識(shí)已經(jīng)說的相對(duì)清楚了。但并沒有面面俱到，特別是當(dāng)你需要手寫 【模塊ID】和【模塊依賴】的時(shí)候，或者自己寫自動(dòng)化工具來做 transport 的時(shí)候（ps:spm貌似適應(yīng)性不是很強(qiáng)也不易用，畢竟每個(gè)項(xiàng)目的目錄結(jié)構(gòu)可能相差很大，且不易改變。當(dāng)然如果他的定位是包管理工具就別指望它來做你的項(xiàng)目的自動(dòng)化構(gòu)建工具了），ID的解析規(guī)則就需要了解透徹了。
注意事項(xiàng)：
1. 頂級(jí)標(biāo)識(shí)始終相對(duì) base 基礎(chǔ)路徑解析。
2. 絕對(duì)路徑和根路徑始終相對(duì)當(dāng)前頁面解析。
3. require 和 require.async 中的相對(duì)路徑相對(duì)當(dāng)前模塊路徑來解析。
4. seajs.use 中的相對(duì)路徑始終相對(duì)當(dāng)前頁面來解析。
seajs中，模塊的ID大致可分為三種：【相對(duì)標(biāo)識(shí)】、【頂級(jí)標(biāo)識(shí)】、【普通路徑】，
普通路徑包括 “絕對(duì)路徑”、“根路徑”，等。
這里重點(diǎn)說明 【相對(duì)標(biāo)識(shí)】 和 【頂級(jí)標(biāo)識(shí)】。
相對(duì)標(biāo)識(shí) 是指 "./","../" 開頭的，如："./OtherModule", "../lib/Base"。
頂級(jí)標(biāo)識(shí) 是指 以文件或目錄（可以包含：字母、-、_）開頭的，如："app/widget/Select"
需要寫模塊ID的地方有三處：
var moduleA = require('./moduleA (3)');
})
注意：無論是define第一個(gè)參數(shù)【模塊ID】還是第二個(gè)參數(shù)【依賴模塊的ID】還是【require模塊ID】，最終的比對(duì)標(biāo)準(zhǔn)是【解析后的文件URI】。
因此，這三處需要寫ID 的地方可以以任意一種方式來寫，只要最終解析為同一個(gè)URI，即被認(rèn)為是同一個(gè)模塊。
在解析ID的過程中，會(huì)預(yù)先經(jīng)過 seajs.config 中定義的 alias 和 paths 的處理。
base 路徑解析規(guī)則
(第 1 層，本身的路徑不依賴于任何設(shè)置)
1. 不可使用【頂級(jí)標(biāo)識(shí)】，因?yàn)轫敿?jí)標(biāo)識(shí)就是相對(duì)于 base 基礎(chǔ)路徑來解析的，因此 base 本身只能使用【相對(duì)標(biāo)識(shí)】或【根路徑】等。
2. base 默認(rèn)路徑為 seajs 的目錄，其他情況參見seajs官網(wǎng)，如果不是seajs推薦的源碼目錄結(jié)構(gòu)，盡量手動(dòng)設(shè)置 base 路徑。
3. 【相對(duì)標(biāo)識(shí)】：相對(duì)于 當(dāng)前頁面 解析。
paths 中路徑解析規(guī)則
(第 1 層，本身的路徑不依賴于任何設(shè)置)
1. 【相對(duì)標(biāo)識(shí)】：在哪里被引用，相對(duì)的解析位置視被引用的地方而定，遵循當(dāng)?shù)氐囊?guī)則。
2. paths中的字段會(huì)被以變量的方式在被使用的地方替換，然后再解析。
比如：
//path定義：
seajs.config({
base:"./app/src",
path:{
"a":"../lib", //(1) 相對(duì)路徑
"lib":"path/to/lib", //(2) 頂級(jí)標(biāo)識(shí)
"l2":"/lib" //(3) 根路徑
}
});
//模塊 mod/m/m.js：
...
require("a/jquery");
//=> 轉(zhuǎn)換為："../../lib/jquery"
//=> 加載：mod/lib/jquery (特別注意 1)
...
//模塊 mod/f.js：
...
require("a/jquery");
//=> 轉(zhuǎn)換為："../../lib/jquery"
//=> 加載：lib/jquery (特別注意 2)
...
alias 中路徑解析規(guī)則
（第 2 層，本身的路徑可以依賴于paths的設(shè)置）
1. alias 的規(guī)則類似于 paths，并且 alias 路徑也可以使用 paths 中的“變量”
2. 提醒：paths、alias 中盡量使用【頂級(jí)標(biāo)識(shí)】、【根路徑】、【絕對(duì)路徑】，不要使用【相對(duì)標(biāo)識(shí)】，因?yàn)樵诓煌疃鹊哪K引用時(shí)會(huì)解析為不同的路徑。
3. 【相對(duì)標(biāo)識(shí)】：在哪里被引用，相對(duì)的解析位置視被引用的地方而定，遵循當(dāng)?shù)氐囊?guī)則。
seajs.use 路徑解析規(guī)則
【相對(duì)標(biāo)識(shí)】：相對(duì)于 當(dāng)前頁面 解析。
define 定義模塊 ID 解析規(guī)則 (1)
（第 3 層，路徑可以相對(duì)于 alias 或 paths 來設(shè)置）
可以使用：【相對(duì)標(biāo)識(shí)】、【頂級(jí)標(biāo)識(shí)】、【根路徑】
推薦使用【頂級(jí)標(biāo)識(shí)】，如果模塊的位置不在 base 基礎(chǔ)路徑內(nèi)，則使用【相對(duì)標(biāo)識(shí)】或【根路徑】。
【相對(duì)標(biāo)識(shí)】：相對(duì) 當(dāng)前頁面 解析
//config -- 還使用 [代碼塊 (1)]中的配置
// 模塊1，無歧義，根路徑解析
define("/app/src/module/Base", ..);
// 模塊2，無歧義，頂級(jí)標(biāo)識(shí)，相對(duì)于 base 基礎(chǔ)路徑來解析
define("app/src/module/Base", ..);
// 模塊3，有歧義，相對(duì)標(biāo)識(shí)，此處相對(duì)于 當(dāng)前頁面（引用到這個(gè)模塊的html頁面）
// 但其他地方即便使用 【表面上相同的“ID”】，也可能會(huì)被解析不同的模塊
define("./app/src/module/Base",..);
模塊依賴ID 解析規(guī)則 (2)
（第 3 層，路徑可以相對(duì)于 alias 或 paths 來設(shè)置）
【相對(duì)標(biāo)識(shí)】：相對(duì) base 基礎(chǔ)路徑解析
//config -- 還使用 [代碼塊 (1)]中的配置
//無歧義，相對(duì)于根路徑解析
define("..", ["/app/src/module/Base"], ..)
// 無歧義，頂級(jí)標(biāo)識(shí)，相對(duì)于 base 基礎(chǔ)路徑解析
define("..", ["app/src/module/Base"], ..)
//有歧義，相對(duì)標(biāo)識(shí)，此處相對(duì)于 當(dāng)前模塊 來解析
//此處的依賴看起來是依賴于【代碼塊（2）】中的 `模塊3`
//但如果當(dāng)前模塊跟當(dāng)前頁面不在同一層目錄下，就不會(huì)被解析為 `模塊3`
define("..", ["./app/src/module/Base"],..)
模塊內(nèi) require 其他模塊的ID 解析規(guī)則 (3)
（第 3 層，路徑可以相對(duì)于 alias 或 paths 來設(shè)置）
【相對(duì)標(biāo)識(shí)】：相對(duì) base 基礎(chǔ)路徑解析
//config -- 還使用 [代碼塊 (1)]中的配置
define("..", [..], function(require){
//無歧義，相對(duì)于根路徑解析
require("/app/src/module/Base");
});
define("..", [..], function(require){
// 無歧義，頂級(jí)標(biāo)識(shí)，相對(duì)于 base 基礎(chǔ)路徑解析
require("app/src/module/Base");
});
define("..", [..], function(require){
//有歧義，相對(duì)標(biāo)識(shí)，此處相對(duì)于 當(dāng)前模塊 來解析
//此處的依賴看起來是依賴于【代碼塊（2）】中的 `模塊3`
//但如果當(dāng)前模塊跟當(dāng)前頁面不在同一層目錄下，就不會(huì)被解析為 `模塊3`
require("./app/src/module/Base");
})
特別提醒：模塊內(nèi)三處需要寫ID的地方，不需要使用看起來相同的字符串，只要被解析為相同的模塊即可。
總結(jié)：
1.paths 和 alias 的設(shè)置僅僅相當(dāng)于一個(gè)變量，在哪里使用，就在那里替換為設(shè)定的值，然后再解析。
2.盡可能的使用【頂級(jí)標(biāo)識(shí)】。
3.如果不能使用【頂級(jí)標(biāo)識(shí)】，比如目錄跨越比較大等，則盡量設(shè)置 alias 或 paths 通過一個(gè)【非相對(duì)路徑】 標(biāo)識(shí) 定位到一個(gè)目錄，然后在這個(gè)標(biāo)識(shí)下，再定義ID。
相關(guān)文章
這篇文章主要介紹了把jQuery的類、插件封裝成seajs的模塊的方法,需要的朋友可以參考下2014-03-03
詳解Sea.js中Module.exports和exports的區(qū)別
最近在看Seajs時(shí)，看到了exports.doSomething和module.exports，想對(duì)這兩者的區(qū)別一探究竟。所以下面這篇文章主要介紹了Sea.js中Module.exports和exports的區(qū)別，需要的朋友可以參考借鑒，一起來看看吧。2017-02-02
seajs學(xué)習(xí)之模塊的依賴加載及模塊API的導(dǎo)出
SeaJS是一個(gè)遵循 CommonJS 規(guī)范的模塊加載框架，可用來輕松愉悅地加載任意JavaScript模塊和css模塊樣式。SeaJS接口和方法也非常少，SeaJS 就兩個(gè)核心：模塊定義和模塊的加載及依賴關(guān)系。本文將詳細(xì)介紹模塊的依賴加載及模塊API的導(dǎo)出，有需要的朋友們可以參考借鑒。2016-10-10
現(xiàn)在使用sea.js的公司越來越多， 比如阿里巴巴，淘寶網(wǎng)，百姓網(wǎng)，支付寶，有道云筆記等。模塊化的javascript開發(fā)帶來了可維護(hù)、可擴(kuò)展性，尤其在多人協(xié)作開發(fā)的時(shí)候不用再擔(dān)心文件依賴和函數(shù)命名沖突的問題，本文給大家分享了sea.js常用的api簡易文檔，下面來一起看看吧2016-11-11
這篇文章主要介紹了SeaJS入門教程,講述了SeaJS的由來,JavaScript傳統(tǒng)開發(fā)模式和模塊化開發(fā)的對(duì)比,需要的朋友可以參考下2014-03-03
近幾年前端工程化越來越完善，打包工具也已經(jīng)是前端標(biāo)配了，像seajs這種老古董早已停止維護(hù)，這是一篇細(xì)細(xì)品味Seajs源碼的文章,看完一定受益匪淺2019-04-04
這篇文章主要介紹了Seajs的相關(guān)知識(shí)和和學(xué)習(xí)心得,適合剛接觸SeaJS的同學(xué),需要的朋友可以參考下2014-03-03
這篇文章主要介紹了seajs模塊壓縮問題與解決方法,結(jié)合實(shí)例形式分析了seajs模塊壓縮過程中出現(xiàn)的問題及相應(yīng)的解決方法,需要的朋友可以參考下2017-10-10
本文是對(duì)Sea.js 提供seajs的模塊化與加載方式的講解，對(duì)學(xué)習(xí)JavaScript編程技術(shù)有所幫助,與大家分享。有需要的小伙伴可以參考下。2015-04-04
這篇文章主要介紹了LABjs、RequireJS、SeaJS的區(qū)別、JS文件加載器、JS塊加載器等知識(shí),需要的朋友可以參考下2014-03-03