首页 > 代码库 > seajs 2.3.0 傻瓜式入门

seajs 2.3.0 傻瓜式入门

2024-07-13 01:56:10   221人阅读

【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=http://www.mamicode.com/"${base}/ZJS/seajs-2.3.0/sea.js"></script>>
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=http://www.mamicode.com/"${base}/ZJS/seajs-2.3.0/sea.js"></script>>
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=http://www.mamicode.com/"${base}/ZJS/seajs-2.3.0/sea.js"></script>>
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使用模块。


联系
我们