seajs github 模塊標識已經說的相對清楚了。但并沒有面面俱到,特別是當你需要手寫 【模塊ID】和【模塊依賴】的時候,或者自己寫自動化工具來做 transport 的時候(ps:spm貌似適應性不是很強也不易用,畢竟每個項目的目錄結構可能相差很大,且不易改變。當然如果他的定位是包管理工具就別指望它來做你的項目的自動化構建工具了),ID的解析規則就需要了解透徹了。
注意事項:
1. 頂級標識始終相對 base 基礎路徑解析。
2. 絕對路徑和根路徑始終相對當前頁面解析。
3. require 和 require.async 中的相對路徑相對當前模塊路徑來解析。
4. seajs.use 中的相對路徑始終相對當前頁面來解析。
seajs中,模塊的ID大致可分為三種:【相對標識】、【頂級標識】、【普通路徑】,
普通路徑包括 “絕對路徑”、“根路徑”,等。
這里重點說明 【相對標識】 和 【頂級標識】。
相對標識 是指 "./","../" 開頭的,如:"./OtherModule", "../lib/Base"。
頂級標識 是指 以文件或目錄(可以包含:字母、-、_)開頭的,如:"app/widget/Select"
需要寫模塊ID的地方有三處:
base 路徑解析規則
(第 1 層,本身的路徑不依賴于任何設置)
1. 不可使用【頂級標識】,因為頂級標識就是相對于 base 基礎路徑來解析的,因此 base 本身只能使用【相對標識】或【根路徑】等。
2. base 默認路徑為 seajs 的目錄,其他情況參見seajs官網,如果不是seajs推薦的源碼目錄結構,盡量手動設置 base 路徑。
3. 【相對標識】:相對于 當前頁面 解析。
paths 中路徑解析規則
(第 1 層,本身的路徑不依賴于任何設置)
1. 【相對標識】:在哪里被引用,相對的解析位置視被引用的地方而定,遵循當地的規則。
2. paths中的字段會被以變量的方式在被使用的地方替換,然后再解析。
比如:
(第 3 層,路徑可以相對于 alias 或 paths 來設置)
可以使用:【相對標識】、【頂級標識】、【根路徑】
推薦使用【頂級標識】,如果模塊的位置不在 base 基礎路徑內,則使用【相對標識】或【根路徑】。
【相對標識】:相對 當前頁面 解析
// 模塊1,無歧義,根路徑解析
define("/app/src/module/Base", ..);
// 模塊2,無歧義,頂級標識,相對于 base 基礎路徑來解析
define("app/src/module/Base", ..);
// 模塊3,有歧義,相對標識,此處相對于 當前頁面(引用到這個模塊的html頁面)
// 但其他地方即便使用 【表面上相同的“ID”】,也可能會被解析不同的模塊
define("./app/src/module/Base",..);
模塊依賴ID 解析規則 (2)
(第 3 層,路徑可以相對于 alias 或 paths 來設置)
【相對標識】:相對 base 基礎路徑解析
//無歧義,相對于根路徑解析
define("..", ["/app/src/module/Base"], ..)
// 無歧義,頂級標識,相對于 base 基礎路徑解析
define("..", ["app/src/module/Base"], ..)
//有歧義,相對標識,此處相對于 當前模塊 來解析
//此處的依賴看起來是依賴于【代碼塊(2)】中的 `模塊3`
//但如果當前模塊跟當前頁面不在同一層目錄下,就不會被解析為 `模塊3`
define("..", [..], function(require){
//無歧義,相對于根路徑解析
require("/app/src/module/Base");
});
define("..", [..], function(require){
// 無歧義,頂級標識,相對于 base 基礎路徑解析
require("app/src/module/Base");
});
define("..", [..], function(require){
//有歧義,相對標識,此處相對于 當前模塊 來解析
//此處的依賴看起來是依賴于【代碼塊(2)】中的 `模塊3`
//但如果當前模塊跟當前頁面不在同一層目錄下,就不會被解析為 `模塊3`
require("./app/src/module/Base");
})
總結:
1.paths 和 alias 的設置僅僅相當于一個變量,在哪里使用,就在那里替換為設定的值,然后再解析。
2.盡可能的使用【頂級標識】。
3.如果不能使用【頂級標識】,比如目錄跨越比較大等,則盡量設置 alias 或 paths 通過一個【非相對路徑】 標識 定位到一個目錄,然后在這個標識下,再定義ID。
新聞熱點
疑難解答