一、前端模块化的价值
二、Sea.js 的常用 API
base
路径来解析 require
的参数值 必须 是字符串直接量require.async
方法用来在模块内部异步加载模块,并在加载完成后执行指定回调。callback
参数可选
1 define(function(require) {
2
3 // 异步加载一个模块,在加载完成时,执行回调
4 require.async('./b', function(b) {
5 b.doSomething();
6 });
7
8 // 异步加载多个模块,在加载完成时,执行回调
9 require.async(['./c', './d'], function(c, d) {
10 c.doSomething();
11 d.doSomething();
12 });
13
14 });
exports
是一个对象,用来向外提供模块接口
可以直接将方法赋给接口,也可以将其添加到对象里面赋给接口
1 define(function(require, exports, module) { 2 3 // 对外提供接口 4 module.exports = { 5 name: 'a', 6 doSomething: function() {}; 7 }; 8 9 });
1 define(function(require, exports) {
2
3 // 对外提供 foo 属性
4 exports.foo = 'bar';
5
6 // 对外提供 doSomething 方法
7 exports.doSomething = function() {};
8
9 });
三、模块
.
开头,只出现在模块环境中(define
的 factory
方法里面)。
顶级标识:顶级标识不以点(.
)或斜线(/
)开始, 会相对模块系统的基础路径(即 Sea.js 的 base
路径)来解析四、 使用步骤
1 seajs.config({
2
3 // 别名配置
4 alias: {
5 'es5-safe': 'gallery/es5-safe/0.9.3/es5-safe',
6 'json': 'gallery/json/1.0.2/json',
7 'jquery': 'jquery/jquery/1.10.1/jquery'
8 },
9
10 // 路径配置
11 paths: {
12 'gallery': 'https://a.alipayobjects.com/gallery'
13 },
14
15 // 变量配置
16 vars: {
17 'locale': 'zh-cn'
18 },
19
20 // 映射配置
21 map: [
22 ['http://example.com/js/app/', 'http://localhost/js/app/']
23 ],
24
25 // 预加载项
26 preload: [
27 Function.prototype.bind ? '' : 'es5-safe',
28 this.JSON ? '' : 'json'
29 ],
30
31 // 调试模式
32 debug: true,
33
34 // Sea.js 的基础路径
35 base: 'http://example.com/path/to/base/',
36
37 // 文件编码
38 charset: 'utf-8'
39 });
1 通过 use 方法,可以在页面中加载任意模块:
2
3 // 加载模块 main,并在加载完成时,执行指定回调
4 seajs.use('./main', function(main) {
5 main.init();
6 });
7 use 方法还可以一次加载多个模块:
8
9 // // 并发加载模块 a 和模块 b,并在都加载完成时,执行指定回调
10 seajs.use(['./a', './b'], function(a, b) {
11 a.init();
12 b.init();
13 });