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"
});

PS：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， 打包到同一个文件中， 相关问题以后有时间再总结。