seajs中模組的解析規則詳解和模組使用總結

來源:互聯網
上載者:User

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的地方有三處:
複製代碼 代碼如下:define("id (1)",["../id2 (2)"], function(require, exports, module){
    var moduleA = require('./moduleA (3)');
})
注意:無論是define第一個參數【模組ID】還是第二個參數【相依模組的ID】還是【require模組ID】,最終的比對標準是【解析後的檔案URI】。
因此,這三處需要寫ID 的地方可以以任意一種方式來寫,只要最終解析為同一個URI,即被認為是同一個模組。
在解析ID的過程中,會預先經過 seajs.config 中定義的 alias 和 paths 的處理。

base 路徑解析規則
(第 1 層,本身的路徑不依賴於任何設定)
1. 不可使用【頂級標識】,因為頂級標識就是相對於 base 基礎路徑來解析的,因此 base 本身只能使用【相對標識】或【根路徑】等。
2. base 預設路徑為 seajs 的目錄,其他情況參見seajs官網,如果不是seajs推薦的源碼目錄結構,盡量手動設定 base 路徑。
3. 【相對標識】:相對於 當前頁面 解析。
paths 中路徑解析規則
(第 1 層,本身的路徑不依賴於任何設定)
1. 【相對標識】:在哪裡被引用,相對的解析位置視被引用的地方而定,遵循當地的規則。
2. paths中的欄位會被以變數的方式在被使用的地方替換,然後再解析。
比如:
複製代碼 代碼如下://代碼塊(1)
//path定義:
seajs.config({
    base:"./app/src",
    path:{
        "a":"../lib", //(1) 相對路徑
        "lib":"path/to/lib", //(2) 頂級標識
        "l2":"/lib" //(3) 根路徑
    }
});
//模組 mod/m/m.js:
...
require("a/jquery");
//=> 轉換為:"../../lib/jquery"
//=> 載入:mod/lib/jquery (特別注意 1)
...
//模組 mod/f.js:
...
require("a/jquery");
//=> 轉換為:"../../lib/jquery"
//=> 載入:lib/jquery (特別注意 2)
...
alias 中路徑解析規則
(第 2 層,本身的路徑可以依賴於paths的設定)
1. alias 的規則類似於 paths,並且 alias 路徑也可以使用 paths 中的“變數”
2. 提醒:paths、alias 中盡量使用【頂級標識】、【根路徑】、【絕對路徑】,不要使用【相對標識】,因為在不同深度的模組引用時會解析為不同的路徑。
3. 【相對標識】:在哪裡被引用,相對的解析位置視被引用的地方而定,遵循當地的規則。
seajs.use 路徑解析規則
【相對標識】:相對於 當前頁面 解析。
define 定義模組 ID 解析規則 (1)

(第 3 層,路徑可以相對於 alias 或 paths 來設定)
可以使用:【相對標識】、【頂級標識】、【根路徑】
推薦使用【頂級標識】,如果模組的位置不在 base 基礎路徑內,則使用【相對標識】或【根路徑】。
【相對標識】:相對 當前頁面 解析
複製代碼 代碼如下:// 代碼塊(2)
//config -- 還使用 [代碼塊 (1)]中的配置

// 模組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 基礎路徑解析
複製代碼 代碼如下://代碼塊(3)
//config -- 還使用 [代碼塊 (1)]中的配置

//無歧義,相對於根路徑解析
define("..", ["/app/src/module/Base"], ..)
// 無歧義,頂級標識,相對於 base 基礎路徑解析
define("..", ["app/src/module/Base"], ..)
//有歧義,相對標識,此處相對於 當前模組 來解析
//此處的依賴看起來是依賴於【代碼塊(2)】中的 `模組3`
//但如果當前模組跟當前頁面不在同一層目錄下,就不會被解析為 `模組3`
define("..", ["./app/src/module/Base"],..)
模組內 require 其他模組的ID 解析規則 (3)
(第 3 層,路徑可以相對於 alias 或 paths 來設定)
【相對標識】:相對 base 基礎路徑解析

複製代碼 代碼如下://代碼塊(4)
//config -- 還使用 [代碼塊 (1)]中的配置

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");
})
特別提醒:模組內三處需要寫ID的地方,不需要使用看起來相同的字串,只要被解析為相同的模組即可。

總結:
1.paths 和 alias 的設定僅僅相當於一個變數,在哪裡使用,就在那裡替換為設定的值,然後再解析。
2.儘可能的使用【頂級標識】。
3.如果不能使用【頂級標識】,比如目錄跨越比較大等,則盡量設定 alias 或 paths 通過一個【非相對路徑】 標識 定位到一個目錄,然後在這個標識下,再定義ID。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.