【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>
// 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>
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>
define(function(require, exports){ var demo = require('./demo.js'); var str = demo.getStr('test'); exports.msg = 'the res is:' + str; });
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使用模块。
seajs 2.3.0 傻瓜式入门,布布扣,bubuko.com
原文地址:http://blog.csdn.net/uikoo9/article/details/37990765