Sea.js的资料整理

一、Sea.js和Grunt构建工具

  好处:

  sea.js按需加载,用到哪些模块会加载哪些模块,节省http请求

  Grunt构建工具:可以对文件进行压缩和合并

 

二、API 快速参考

一、seajs.config

用来对 Sea.js 进行配置。

 1 seajs.config({
 2 
 3     // 设置路径,方便跨目录调用
 4     paths: {
 5         arale: https://a.alipayobjects.com/arale,
 6         jquery: https://a.alipayobjects.com/jquery
 7     },
 8 
 9     // 设置别名,方便调用
10     alias: {
11         class: arale/class/1.0.0/class,
12         jquery: jquery/jquery/1.10.1/jquery
13     }
14 
15 });

 

二、seajs.use

用来在页面中加载一个或多个模块。

 1 // 加载一个模块
 2 seajs.use(./a);
 3 
 4 // 加载一个模块,在加载完成时,执行回调
 5 seajs.use(./a, function(a) {
 6     a.doSomething();
 7 });
 8 
 9 // 加载多个模块,在加载完成时,执行回调
10 seajs.use([./a, ./b], function(a, b) {
11     a.doSomething();
12     b.doSomething();
13 });

 

三、define

用来定义模块。Sea.js 推崇一个模块一个文件,遵循统一的写法:

1 define(function(require, exports, module) {
2 
3     // 模块代码
4 
5 });

require, exportsmodule 三个参数可酌情省略,具体用法如下。

 

四、require

require 用来获取指定模块的接口。

1 define(function(require) {
2 
3     // 获取模块 a 的接口
4     var a = require(./a);
5 
6     // 调用模块 a 的方法
7     a.doSomething();
8 });

注意,require 只接受字符串直接量作为参数

 

五、require.async

用来在模块内部异步加载一个或多个模块。

 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) {
2 
3     // 对外提供 foo 属性
4     exports.foo = bar;
5 
6     // 对外提供 doSomething 方法
7     exports.doSomething = function() {};
8 
9 });

 

七、module.exports

exports 类似,用来在模块内部对外提供接口。

1 define(function(require, exports, module) {
2 
3   // 对外提供接口
4   module.exports = {
5     name: a,
6     doSomething: function() {};
7   };
8 
9 });

module.exportsexports 的区别

 


以上 7 个接口是最常用的,要牢记于心。

Sea.js的资料整理,布布扣,bubuko.com

Sea.js的资料整理

上一篇:JS魔法堂:那些困扰你的DOM集合类型


下一篇:jquery 文本框失去焦点显示提示信息&&单击置空文本框