写一个小demo加深印象...
运行结果图，
demo总体结构图，
seajs.htm
<!doctype html>
<html>
<head>
<title>seajs-demo</title>
<script src="js/lib/sea.js" data-main="./js/init" type="text/javascript"></script>
</head>
<body>
<div id="page">
</div>
</body>
</html>
init.js
seajs.config({
alias: {//设置别名
'jquery': 'jquery/1.7.1/jquery'
},
preload: ['plugin-text']//提前加载文本插件
});
define(function(require, exports, module) {//模块格式
var $ = require('jquery'),//引用相关文件
p = require('./tmpls/page.tpl'),
d = require('./moduls/modul1');
/*
*查看模块表示的路径
* 如果没有配置base路径，直接写的路径为seajs.js文件所在的目录
* ./相对于当前目录
* ../相对于上一个目录
* /相对于根目录
*/
console.log(require.resolve('moduls/modul1'));
console.log(require.resolve('./moduls/modul1'));
console.log(require.resolve('../moduls/modul1'));
console.log(require.resolve('/moduls/modul1'));
$(function() {
//由于没有引用模版插件，简单替换
var data = d.Run(), html = p.replace('{{name}}', data['name']);
$("#page").append(html);
});
});
modul1.js
define(function(require, exports, module) {
var data = require('./modul2');
exports.Run = function() {
return data;
}
});
modul2.js
define(function(require, exports, module) {
var data = require('./modul3');
return data;
});
modul3.js
define({ "name": "ygm" });
page.tpl
<div>I am {{name}}.</div>
注意：
1引用的常用库，如jquery等，如果想require('jquery')，要改造源码，用define(...)包装起来
2define模块里的require('xxx.js')会在解析时加载，如果要按需加载用require.async(..
关于更多查看项目地址 https://github.com/seajs/seajs