seajs模塊路徑解析 簡單總結

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.js

define(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， 打包到同一個文件中， 相關問題以后有時間再總結。