Sea.js 追求简单、自然的代码书写和组织方式,具有以下核心特性:
- 简单友好的模块定义规范:Sea.js 遵循CMD规范,可以像Node.js一般书写模块代码。
- 自然直观的代码组织方式:依赖的自动加载、配置的简洁清晰,可以让我们更多地享受编码的乐趣。
Sea.js 还提供常用插件,非常有助于开发调试和性能优化,并具有丰富的可扩展接口。
兼容性
Sea.js 具备完善的测试用例,兼容所有主流浏览器:
1
2
3
4
5
|
Chrome 3+ ✔
Firefox 2+ ✔
Safari 3.2+ ✔
Opera 10+ ✔
IE 5.5+ ✔
|
Sea.js 可运行在 Mobile 端,包括 Hybrid 模式的 App 上。理论上,Sea.js 可以运行在任何浏览器引擎上。
引用文献:
前端模块化开发的价值
一步步学会使用SeaJS 2.0
API 快速参考
seajs.config
用来对 Sea.js 进行配置。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
seajs.config({
// 设置路径,方便跨目录调用
paths: {
},
// 设置别名,方便调用
alias: {
'class'
:
'arale/class/1.0.0/class'
,
'jquery'
:
'jquery/jquery/1.10.1/jquery'
}
});
|
更多配置项请参考:#262
seajs.use
用来在页面中加载一个或多个模块。
1
2
3
4
5
6
7
8
9
10
11
12
13
|
// 加载一个模块
seajs.use(
'./a'
);
// 加载一个模块,在加载完成时,执行回调
seajs.use(
'./a'
,
function
(a) {
a.doSomething();
});
// 加载多个模块,在加载完成时,执行回调
seajs.use([
'./a'
,
'./b'
],
function
(a, b) {
a.doSomething();
b.doSomething();
});
|
更多用法请参考:#260
define
用来定义模块。Sea.js 推崇一个模块一个文件,遵循统一的写法:
1
2
3
4
5
|
define(
function
(require, exports, module) {
// 模块代码
});
|
也可以手动指定模块 id 和依赖,详情请参考:#242
require
,exports
和module
三个参数可酌情省略,具体用法如下。
require
require
用来获取指定模块的接口。
1
2
3
4
5
6
7
8
|
define(
function
(require) {
// 获取模块 a 的接口
var
a = require(
'./a'
);
// 调用模块 a 的方法
a.doSomething();
});
|
注意,require
只接受字符串直接量作为参数,详细约定请阅读:#259
require.async
用来在模块内部异步加载一个或多个模块。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
define(
function
(require) {
// 异步加载一个模块,在加载完成时,执行回调
require.async(
'./b'
,
function
(b) {
b.doSomething();
});
// 异步加载多个模块,在加载完成时,执行回调
require.async([
'./c'
,
'./d'
],
function
(c, d) {
c.doSomething();
d.doSomething();
});
});
|
详细说明请参考:#242
exports
用来在模块内部对外提供接口。
1
2
3
4
5
6
7
8
9
|
define(
function
(require, exports) {
// 对外提供 foo 属性
exports.foo =
'bar'
;
// 对外提供 doSomething 方法
exports.doSomething =
function
() {};
});
|
详细说明请参考:#242
module.exports
与exports
类似,用来在模块内部对外提供接口。
module.exports
与exports
的区别,以及详细说明请参考:#242
CMD 模块定义规范
模块标识
require 书写约定
模块的加载启动
配置
标准构建
插件
- seajs-text
加载模板字符串
加载 Handlebars 模板并进行预编译
加载 JSON 数据
- seajs-style
seajs.importStyle(cssText, id?)
- seajs-combo
减少 HTTP 请求数是性能优化中非常重要的一条准则。使用 combo 插件,配合服务器的nginx-http-concat服务(安装指南),可自动对同一批次的多个模块进行合并下载。
- seajs-flush
通过 combo 插件,我们可以对同一数组中的加载项进行合并加载。通过 flush 插件,我们可以更进一步减少 HTTP 请求数。
- seajs-debug
调试插件
- seajs-log
加载 seajs-log 插件后,seajs 会拥有 log 方法。
- seajs-health
通过 health 插件,可以分析当前页面模块的健康情况。
多版本共存
- Sea.js 的调试接口
seajs.cacheObject
通过seajs.cache
,可以查阅当前模块系统中的所有模块信息
seajs.resloveFunction
类似require.resolve
,会利用模块系统的内部机制对传入的字符串参数进行路径解析。
seajs.requireFunction
全局的require
方法,可用来直接获取模块接口
seajs.dataObject
通过seajs.data
,可以查看seajs
所有配置以及一些内部变量的值,可用于插件开发。当加载遇到问题时,也可用于调试。
seajs.logFunction
由 seajs-log 插件提供
- ID 和路径匹配原则
使用seajs.use
或require
进行引用的文件,如果是具名模块(即定义了 ID 的模块),会把 ID 和seajs.use
的路径名进行匹配,如果一致,则正确执行模块返回结果。反之,则返回null
。
改造现有文件为 CMD 模块
插件开发指南
Sea.js 通过事件提供可扩展接口。要给 Sea.js 开发插件,需要了解 Sea.js 内部所提供的事件类型。