manlili blog

requireJS实现SPA

发表于 | 分类于

gitHub地址:https://github.com/manlili/require_spa
requireJS手册http://www.requirejs.cn/

requireJS作用

RequireJS的目标是鼓励代码的模块化，以一个相对于baseUrl的地址来加载所有的代码。

开始搭建SPA

首先来看下目录：
图
从上图中可以看出我引进了两个辅助的插件jquery和text，这两个插件就不介绍了，看手册很简单。

先来看下index.html入口文件的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css" class="css-attribute">
			
		</style>
	</head>
	<body>
		<script data-main="js/main" src="js/require.js"></script>
		<div class="page">
			
		</div>
	</body>
</html>

require.js 在加载的时候会检察data-main 属性,我这里引进的是main.js，然后在main.js设置模板加载选项，来看下main.js内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
require.config({
	paths:{
		"jquery":"lib/jquery-1.11.0",
		"text":"lib/text",
		"text1":"../template/test1.html",  //这里千万注意路径
		"text2":"../template/test2.html",
		"css1":"../style/test1.css",
		"css2":"../style/test2.css"
	}
})
require(['jquery','text!text1','text!text2','text!css1','text!css2'],function($,template1,template2,css1,css2){
//	进入页面先设置为页面test1.html内容
	$(".css-attribute").html(css1);
	$(".page").html(template1);
	
//	点击skip按钮设置为页面test2.html内容
	$(".skip").click(function(){
		$(".css-attribute").html(css2);
		$(".page").html(template2);
	})
})

其中require.config中paths是用来配置SPA的访问路径，包括插件，html以及css等，然后再用模块的方式写各个页面的业务逻辑。

关于test1.css内容是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.test1{
	position: absolute;
	top:0;
	bottom:0;
	left: 0;
	right: 0;
	background-color: red;
}
.skip{
	position: absolute;
	top:50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

test2.css内容是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.test2{
	position: absolute;
	top:0;
	bottom:0;
	left: 0;
	right: 0;
	background-color: pink;
}
.skip2{
	position: absolute;
	top:50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

test1.html内容是：

1
2
3
<div class="test1">
	<button class="skip">点击我跳到SPA第二页</button>
</div>

test2.html内容是：

1
2
3
<div class="test2">
	<button class="skip2">我是第二页,点击我回第一页</button>
</div>

来看下结果：
图
点击按钮后的页面：
图
从上图框起来的代码可以知道页面仍然是index.html，但是里面的代码动态变化了。

请我喝杯果汁吧！