seajs 2.3.0 傻瓜式入门
时间：2014-07-21 09:33:23
收藏：0
阅读：287
【seajs】
很久之前就想使用seajs，尝试了多次，可能是自己比较笨或者seaj的文档和例子太简单，总是无从下手，
这次自己搞了一个网站，引用多个js的时候需要减少http请求，
找了半天又找到seajs+spm，好吧，再来一次。
【博文】
这个博文讲的很透彻，好像是seajs开发者写的，供参考，如果这个博文能看懂那就不必再往下看了，
地址：https://speakerdeck.com/lifesinger/seajs
【傻瓜式入门】
如果还是看不懂，那就一步一步往下看吧。
说明：
我的例子是使用freemarker写的，要是不知道这个东西，那就需要你改写为html的，
其实没有区别，就是路径需要改改，要是知道，那就直接tomcat跑起来看吧。
【demo01】
demo01.ftl
<!DOCTYPE html>
<html>
<head>
<title>seajs-demo-01</title>
<!-- 引入sea.js -->
<script type="text/javascript" src="${base}/ZJS/seajs-2.3.0/sea.js"></script>
<script type="text/javascript">
// 使用demo01.js
seajs.use('${base}/ZJS/demo01.js');
</script>
</head>
<body>
</body>
</html>
demo01.js
// seajs中一个js文件就是一个模块，模块定义就这样定义
define(function(){
alert('1111');
});运行效果：
【demo02】
demo02.ftl
<!DOCTYPE html>
<html>
<head>
<title>seajs-demo-02</title>
<!-- 引入sea.js -->
<script type="text/javascript" src="${base}/ZJS/seajs-2.3.0/sea.js"></script>
<script type="text/javascript">
seajs.use('${base}/ZJS/demo02.js', function(aa){
alert(aa.msg);
});
</script>
</head>
<body>
</body>
</html>
demo02.js
define(function(require, exports){
exports.msg = '222';
});运行效果：
【demo03】
demo03.ftl
<!DOCTYPE html>
<html>
<head>
<title>seajs-demo-02</title>
<!-- 引入sea.js -->
<script type="text/javascript" src="${base}/ZJS/seajs-2.3.0/sea.js"></script>
<script type="text/javascript">
seajs.use('${base}/ZJS/demo03.js', function(aa){
alert(aa.msg);
});
</script>
</head>
<body>
</body>
</html>
demo03.js
define(function(require, exports){
var demo = require('./demo.js');
var str = demo.getStr('test');
exports.msg = 'the res is:' + str;
});demo.js
define(function(require, exports){
exports.getStr = function(ss){
if(ss == '1'){
return '111';
}else{
return '222';
}
};
});运行效果：
【简单讲解】
拿demo03来说：
1.每个js就是一个模块，定义需要使用define
2.每个模块中有require和exports两个参数
3.require定义了这个模块依赖的模块，获取之后可以使用
4.exports定义了这个模块给其他模块提供的外部方法，其他模块获取这个模块之后可以调用这些方法。
5.使用的时候利用seajs.use使用模块。
评论（0）