众所周知,SeaJS是一个遵循CMD规范的JavaScript模块加载框架,它的创作者是淘宝前端工程师玉伯,主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载,将前端工程师从繁重的JavaScript文件及对象依赖处理中解放出来,可以专注于代码本身的逻辑,以实现JavaScript的模块化开发及加载机制。
附上SeaJS下载地址:seajs.github.io/seajs/docs/…
常用API
- seajs.use(用来在页面中加载一个或多个模块)
// 加载一个模块
seajs.use('./a');
seajs.use('./a', function(a) {
a.do();//执行回调
});
// 加载多个模块,在加载完成时,执行回调
seajs.use(['./a', './b'], function(a, b) {
a.do();
b.do();
});
- define(用来定义模块。Sea.js 推崇一个模块一个文件)
define(function(require, exports, module) { // 模块代码});
- require(用来获取指定模块的接口)
define(function(require) {
var a = require('./a'); // 调用模块 a接口
a.do(); //获取do方法
});
- require.async(用来异步加载模块)
define(function(require) {
require.async('./b', function(b) {
b.do();
}); // 异步加载一个模块
require.async(['./c', './d'], function(c, d) {
c.do();
d.do();
}); // 异步加载多个模块
});
- exports(用来在模块内部对外提供接口)
define(function(require, exports) {
exports.nm= 'a'; // 对外提供nm属性
exports.do = function() {};//对外提供do方法
});
- module.exports(用来在模块内部对外提供接口)
define(function(require, exports, module) {
module.exports = {
name: 'a',
do: function() {};
};
});// 对外提供接口
SeaJS原理
内部创建一个script标签,通过src把你要引入的js模块引入进来,然后append到DOM文档中进行加载,定义一个全局函数define,用来获取模块里面所写的代码,模块中的define函数自己执行,将里面的函数传递到sea.js插件中,然后再去做处理,sea.js将模块中的module.exports = 的东西提取出来,回调函数传递给index中,接受到了这个模块中的module.exports。把最后这个script标签移除掉,所以当我们审查元素时看不到有那个script标签。
Seajs与Require差异
- 遵循的规范不同。RequireJS 遵循 AMD(异步模块定义)规范,Sea.js 遵循 CMD (通用模块定义)规范。因此两者的API也有所不同。
- SeaJS对模块的态度是懒执行, 而RequireJS对模块的态度是预执行(SeaJS只会在真正需要使用(依赖)模块时才去执行该模块,模块执行的顺序也是严格按照代码中的顺序,而requireJS会提前把所有的模块执行了,所以它的执行顺序不是严格按照代码的顺序)