Sea.js 是一个模块加载器
1 模块定义define
define(function(require,exports,module){
//require 引入需要的模块如jquery等
//var $ = require('./jquery');
//exports可以把方法或属性暴露给外部
exports.name = 'hi';
exports.hi = function(){
alert('hello');
}
//module提供了模块信息
});
2 使用定义好的模块seajs.use
<!doctype html>
<html>
<head>
<title>SeaJs Test</title>
<meta charset="UTF-8">
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="seajs/sea.js"></script>
</head>
<body>
<script type="text/javascript">
//第一个参数是模块标识，即要使用模块的路径，这里是t1.js
//第二个参数是一个回调函数
seajs.use('./js/t1',function(t){
t.hi();
});
</script>
</body>
</html>
3 加载依赖项require
//名称必须是require，可以理解为一个关键词一样，接收一个参数
var $ = require('./jquery');
4 向外部提供接口exports
define(function(require,exports,module){
//exports可以把方法或属性暴露给外部
exports.name = 'hi';
exports.hi = function(){
alert('hello');
}
});
5 当前模块信息module
1) module.id 模块标识
2)module.uri 根据模块系统的路径解析规则得到的模块绝对路径
3) module.dependencies 表示当前模块的依赖列表，是一个数组
4) module.status 当前模块的状态，是一个数值
6 Sea.js 是一个模块加载器，模块加载器需要实现两个基本功能：
文档： https://github.com/seajs/seajs/issues/260
1) 模块定义规范的实现
这就是 define，require，exports，module 的实现
2)模块系统的启动
有了 define 等模块定义规范的实现，我们可以开发出很多模块。但光有一堆模块不管用，我们还得让它们能跑起来
在 Sea.js 里，要启动模块系统很简单
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="path/to/sea.js"></script>
<script>
seajs.use('./main');
</script>
seajs.use用来在页面中加载模块。
// 加载模块 main，并在加载完成时，执行指定回调
seajs.use('./main', function(main) {
main.init();
});
use 方法还可以一次加载多个模块：
// 并发加载模块 a 和模块 b，并在都加载完成时，执行指定回调
//callback 参数可选，省略时，表示无需回调。
seajs.use(['./a', './b'], function(a, b) {
a.init();
b.init();
});
3) 与 DOM ready 的关系
注意：seajs.use 与 DOM ready 事件没有任何关系。如果某些操作要确保在 DOM ready 后执行，需要使用 jquery 等类库来保证，比如：
seajs.use(['jquery', './main'], function($, main) {
$(document).ready(function() {
main.init();
});
});
4) sea.js 的引入
在调用 seajs.use 之前，需要先引入 sea.js 文件，推荐直接使用 script 标签同步引入
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="path/to/sea.js"></script>
7 最佳实践
1)seajs.use 理论上只用于加载启动，不应该出现在 define 中的模块代码里。在模块代码里需要异步加载其他模块时，推荐使用 require.async 方法。
2)引入 sea.js 时，可以把 sea.js 与其他文件打包在一起，可提前合并好，或利用 combo 服务动态合并。无论哪一种方式，为了让 sea.js 内部能快速
获取到自身路径，推荐手动加上 id 属性：
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="path/to/sea.js" id="seajsnode"></script
加上 seajsnode 值，可以让 sea.js 直接获取到自身路径，而不需要通过其他机制去自动获取。这对性能和稳定性会有一定提升，推荐默认都加上
共同学习，写下你的评论
评论加载中...
作者其他优质文章
