快捷導(dǎo)航

seajs中模塊的解析規(guī)則詳解和模塊使用總結(jié)

更新時(shí)間：2014年03月12日 15:31:33 作者：

這篇文章主要介紹了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)前頁(yè)面解析。
3. require 和 require.async 中的相對(duì)路徑相對(duì)當(dāng)前模塊路徑來解析。
4. seajs.use 中的相對(duì)路徑始終相對(duì)當(dāng)前頁(yè)面來解析。

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的地方有三處：

復(fù)制代碼代碼如下:

define("id (1)",["../id2 (2)"], function(require, exports, module){
    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)前頁(yè)面解析。
paths 中路徑解析規(guī)則
(第 1 層，本身的路徑不依賴于任何設(shè)置)
1. 【相對(duì)標(biāo)識(shí)】：在哪里被引用，相對(duì)的解析位置視被引用的地方而定，遵循當(dāng)?shù)氐囊?guī)則。
2. paths中的字段會(huì)被以變量的方式在被使用的地方替換，然后再解析。
比如：

復(fù)制代碼代碼如下:

//代碼塊（1）
//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)前頁(yè)面解析。
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)前頁(yè)面解析

復(fù)制代碼代碼如下:

// 代碼塊（2）
//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)前頁(yè)面（引用到這個(gè)模塊的html頁(yè)面）
// 但其他地方即便使用【表面上相同的“ID”】，也可能會(huì)被解析不同的模塊
define("./app/src/module/Base",..);

模塊依賴ID 解析規(guī)則 (2)

（第 3 層，路徑可以相對(duì)于 alias 或 paths 來設(shè)置）
【相對(duì)標(biāo)識(shí)】：相對(duì) base 基礎(chǔ)路徑解析

復(fù)制代碼代碼如下:

//代碼塊（3）
//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)前頁(yè)面不在同一層目錄下，就不會(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ǔ)路徑解析

復(fù)制代碼代碼如下:

//代碼塊（4）
//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)前頁(yè)面不在同一層目錄下，就不會(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。

您可能感興趣的文章: