seajs模块路径解析简单总结

浏览数：20 / 时间：2015年06月09日

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"

模块路径解析

替换alias
添加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"
});