seajs模組路徑解析 簡單總結

標籤：style   class   blog   code   http   color   

seajs模組路徑解析

最近在試著用seajs + grunt改造現有項目， 遇到的最大的問題就是seajs命名與調用， 簡單總結一下。

模組調用

seajs中調用模組有兩種方式，seajs.use(ID) 、 require(ID)。

ID命名

• 完整絕對路徑 例如 "http://example.com/test/js/jquery/jquery.js"
• 以 "." 開頭 例如 "./home/main" "../main"
• 以 "/" 開頭 例如 "/js/home/"
• 普通命名 例如 "home/main"

模組路徑解析

1. 替換alias
2. 添加base首碼

可以在seajs.config()方法中設定ID別名和基礎路徑, 例如：

seajs.config({    base:"js",    alias: {        jquery: "/jquery/jquery"    }})

 

base添加規則

• 完整的絕對路徑 不會加base

• 以 "." 開頭 會相對於當前（被調用的）模組解析地址。 如果不存在被調用的模組（如seajs.use() ）， 則會相對於當前頁面解析地址。

• 以 "/" 開頭 相對於當前頁面的根目錄 解析地址

• 普通命名 直接加上base首碼

base值

• base 預設值是 seajs所在目錄

• seajs.config()中base的解析與ID命名解析規則相同

例如:

http://example.com/test/js/sea/sea.js

http://example.com/test/index.html

在index.html中調用了sea.js

base的預設值為 "http://example.com/test/js/sea/"

如果使用seajs.config()設定了base

seajs.config({    base: "home"  // base值為 "http://example.com/test/js/sea/home"});seajs.confg({    base: "./home"  // base值為 "http://example.com/test/home"});seajs.conifg({    base: "/home"   // base值為 "http://example.com/home"});

 

seajs.config()中的base 與 seajs.use() 的ID一樣， "." 開頭的ID 會相對於當前頁面 解析地址（因為不存在被調用的模組）

完整的解析例子：

有如下檔案

http://example.com/test/js/sea/sea.js

http://example.com/test/js/home/main.js

http://example.com/test/js/home/tpl.js

http://example.com/test/index.html

index.html頁面調用sea.js

seajs.config({    base: "./js"        // base為 "http://example.com/test/js"    alias: {        "jquery": "jquery/jquery"    }});// 調用 mian seajs.use("home/main");     // 解析後的路徑為 "http://example.com/test/js/home/main.js"// 也可以這麼寫seajs.use("./js/home/main");    // 解析路徑為 "http://example.com/test/js/home/main.js"main.jsdefine(function(require) {    var $ = require("jquery");      // "http://example.com/test/js/jquery/jquery.js"    // 調用 tpl    var tpl = require("./tpl");     // "http://example.com/test/js/home/tpl.js"    // 也可以    var tpl = require("home/tpl");  // "http://example.com/test/js/home/tpl.js"});

以上例子中的模組define() 都沒有定義ID， 實際上項目中打包時會根據配置 自動為模組設定ID， 打包到同一個檔案中， 相關問題以後有時間再總結。