最近在试着用 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, 打包到同一个文件中, 相关问题以后有时间再总结。