【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使用模块。