Sea.js 的 API 其实并不复杂,但日常开发中真正高频用到的,翻来覆去也就那么几个核心配置和调用方式。下面直接整理一份常用 API 清单,配合代码示例,方便随时查阅。

一、seajs.config
alias
别名配置,配置之后可在模块中使用 require('jquery') 直接调用。
seajs.config({
alias: { 'jquery': 'jquery/jquery/1.10.1/jquery' }
});
define(function(require, exports, module) {
//引用jQuery模块
var $ = require('jquery');
});
paths
设置路径,方便跨目录调用。通过灵活设置 path,可以在不影响 base 的前提下指定到某个目录。
seajs.config({
//设置路径
paths: {
'gallery': 'https://a.alipayobjects.com/gallery'
},
// 设置别名,方便调用
alias: {
'underscore': 'gallery/underscore'
}
});
vars
变量配置。有些场景下模块路径需要在运行时才能确定,这时可以用 vars 来做变量替换。在模块标识中用 {key} 表示变量。
seajs.config({
// 变量配置
vars: {
'locale': 'zh-cn'
}
});
define(function(require, exports, module) {
var lang = require('./i18n/{locale}.js');
//=> 加载的是 path/to/i18n/zh-cn.js
});
map
对模块路径进行映射修改,常用于路径转换或在线调试。比如把 .js 替换成 -debug.js。
seajs.config({
map: [
[ '.js', '-debug.js' ]
]
});
define(function(require, exports, module) {
var a = require('./a');
//=> 加载的是 path/to/a-debug.js
});
preload
在普通模块加载之前,提前加载并初始化好指定模块。空字符串会被忽略。
// 在老浏览器中,提前加载好 ES5 和 json 模块
seajs.config({
preload: [
Function.prototype.bind ? '' : 'es5-safe',
this.JSON ? '' : 'json'
]
});
需要注意:preload 中的配置需要等到 use 时才真正加载。例如:
seajs.config({
preload: 'a'
});
// 在加载 b 之前,会确保模块 a 已经加载并执行好
seajs.use('./b');
debug
值为 true 时,加载器不会删除动态插入的 script 标签。插件也可以根据 debug 配置决定 log 等信息的输出。
base
Sea.js 在解析顶级标识时,会相对 base 路径来解析。不过一般来说,不建议手动配置 base 路径——把 sea.js 放在合适的目录下往往更简单一致。
charset
获取模块文件时, 或 标签的 charset 属性,默认是 utf-8。也可以是一个函数:
seajs.config({
charset: function(url) {
// xxx 目录下的文件用 gbk 编码加载
if (url.indexOf('https://example.com/js/xxx') === 0) {
return 'gbk';
}
// 其他文件用 utf-8 编码
return 'utf-8';
}
});
二、seajs.use
用来在页面中加载一个或多个模块。语法:seajs.use(id, callback?)
// 加载一个模块
seajs.use('./a');
// 加载一个模块,在加载完成时,执行回调
seajs.use('./a', function(a) {
a.doSomething();
});
// 加载多个模块,在加载完成时,执行回调
seajs.use(['./a', './b'], function(a, b) {
a.doSomething();
b.doSomething();
});
有一点需要特别留意:seajs.use 与 DOM ready 事件没有任何关系。如果要在 DOM ready 后执行操作,必须借助 jQuery 等类库来保证。比如:
seajs.use(['jquery', './main'], function($, main) {
$(document).ready(function() {
main.init();
});
});
另外,use 方法的第一个参数一定要有,但可以是 null,也可以是一个变量:
var bootstrap = ['bootstrap.css', 'bootstrap-responsive.css', 'bootstrap.js'];
seajs.use(bootstrap, function() {
//do something
});
三、seajs.cache
通过 seajs.cache 可以查看当前模块系统中的所有模块信息。比如打开 seajs.org,在 WebKit Developer Tools 的 Console 面板中输入 seajs.cache,你会看到类似这样的输出:
Object > https://seajs.org/docs/assets/main.js: x > https://a.alipayobjects.com/jquery/jquery/1.10.1/jquery.js: x > __proto__: Object
这些就是文档首页用到的模块。展开某一项可以看到模块的具体信息,含义可参考 CMD 模块定义规范中的 module 小节。
四、seajs.resolve
类似 require.resolve,会利用模块系统的内部机制对传入的字符串参数进行路径解析。
seajs.resolve('jquery');
// => https://path/to/jquery.js
seajs.resolve('./a', 'https://example.com/to/b.js');
// => https://example.com/to/a.js
这个方法不光可以用来调试路径解析是否正确,在插件开发环境中也很有用。
五、seajs.data
通过 seajs.data 可以查看所有配置以及一些内部变量的值,常用于插件开发。当加载遇到问题时,也可以用来排查问题。
六、常见问题
关于模块标识
Sea.js 模块标识主要分为相对标识和顶级标识。以 . 或 .. 开头的是相对标识;以小驼峰字符串开头的则是顶级标识。
// 在 https://example.com/js/a.js 的 factory 中:
require.resolve('./b');
// => https://example.com/js/b.js
// 在 https://example.com/js/a.js 的 factory 中:
require.resolve('../c');
// => https://example.com/c.js
// 假设 base 路径是:https://www.aseoe.com/assets/
// 在模块代码里:
require.resolve('gallery/jquery/1.9.1/jquery');
// => https://www.aseoe.com/assets/gallery/jquery/1.9.1/jquery.js
//sea.js的路径,即 base 路径,相对于当前页面
关于路径
除了相对标识和顶级标识,Sea.js 也支持使用普通路径来加载模块。刚开始接触 Sea.js 时,可能会觉得路径规则有点绕,尤其是 base 路径。记住一点就好:base 路径就是 sea.js 文件所在目录的上级路径,所有顶级标识和相对标识都是基于这个 base 来计算的。
总结
以上就是 Sea.js 常用 API 的完整梳理。配置项、use 方法、缓存查看、路径解析——把这些掌握好,日常开发基本够用。如果后续遇到更复杂的场景,再针对具体需求深入即可。
