码迷,mamicode.com
首页 > Web开发 > 详细

seajs 2.3.0 傻瓜式入门

时间:2014-07-21 09:33:23      阅读:287      评论:0      收藏:0      [点我收藏+]

标签:blog   http   java   使用   文件   2014   

【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');
});

运行效果:

bubuko.com,布布扣


【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';
});

运行效果:

bubuko.com,布布扣


【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';
		}
	};
});

运行效果:

bubuko.com,布布扣


【简单讲解】

拿demo03来说:

1.每个js就是一个模块,定义需要使用define

2.每个模块中有require和exports两个参数

3.require定义了这个模块依赖的模块,获取之后可以使用

4.exports定义了这个模块给其他模块提供的外部方法,其他模块获取这个模块之后可以调用这些方法。

5.使用的时候利用seajs.use使用模块。

seajs 2.3.0 傻瓜式入门,布布扣,bubuko.com

seajs 2.3.0 傻瓜式入门

标签:blog   http   java   使用   文件   2014   

原文地址:http://blog.csdn.net/uikoo9/article/details/37990765

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!