在没有RequireJS以前，我们的html页面都需要配置很多js文件，有了RequireJS以后，我们只需要简单的一个RequireJS的文件就可以了。
工程目录
先看下我们的工程目录，主要引入了Jqury、AngularJS和RequireJS这几个js文件，login.html、main.js和login.js是我们自己的文件。
1
2
3
4
5
6
7
8
9
10
11
| --webapp
|--resources
|--scripts
|--vendor
|--jquery.js
|--angularjs.js
|--requirejs.js
|--login.js
|--main.js
|--WEB-INF
|--login.html
|
在html页面中加入RequireJS
首先在html页面我们先引入requirejs，可以看到script标签中有个data-main属性，这个是RequireJS的属性标签，指向我们工程里面的main.js文件，注意这里不需要写.js后缀。
index.html1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
| <!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>My App</title>
<script src="resources/scripts/vendor/require.js" data-main="resources/srcipts/main"></script>
</head>
<body>
<div>
<form name="LoginForm" method="post" action="j_spring_security_check">
<div style="display: block;">
<div>
<h1>
<span class="ui-icon add"></span>用户登录
</h1>
</div>
<div class="content">
<div id="error" style="display: none; color: #c9302c" align="center">
<h3>认证失败，请重新登录</h3>
</div>
<div id="logout" style="display: none; color: #02547f" align="center">
<h3>已成功登出</h3>
</div>
<ul>
<li><label>
<span>用户名</span>
<input type="text" name="j_username">
</label></li>
<li><label>
<span>密码</span>
<input type="password" name="j_password">
</label></li>
</ul>
</div>
<div>
<button type="submit" name="logon" value="Logon">登录</button>
</div>
</div>
</form>
</div>
</body>
</html>
|
main.js
下面是我们的main.js。
main.js1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| require.config({
paths:{
angular: 'vendor/angular',
jquery: 'vendor/jquery'
},
shim:{
angular:{
deps: ['jquery'],
exports: 'angular'
}
}
});
require(['angular', 'login'], function(angular) {
});
|
paths里面指定了jqury和angularjs对应的js文件路径，同样不需要写js后缀，并给他们起了对应的别名。 shim属性里面配置了deps数组，表明angular依赖jqury，还有exports值，表明这个模块外部调用时的名称。 - 最后一部分代码表示我们的html页面需要使用哪些js文件，比如我们使用了angular和login这2个js文件的功能，同时angular依赖了jqurey，所以html页面加载的时候就会同时将jquery.js、angularjs.js和login.js这几个js文件加载进来。
login.js
最后看一下我们的login.js，通过之前的main.js我们已经加载好了Jquery和AngularJS这些第三方JS库，要使用它们的话需要通过define的方式来引用。
比如下面的js文件使用了jquery的功能，我们可以在define后面添加angular这个名称，因为前面在shim属性里面已经定义了angular依赖jquery，所以使用angular也可以用到jquery的功能。(当然我们也可以单独添加jquery，但这样就使用不到angular的功能了)
login.js1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| define(['angular'], function(angular) {
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
if(getParameterByName("error")) {
$("#error").show();
}
if(getParameterByName("logout")) {
$("#logout").show();
}
});
|
