显示目录

RequireJS 加载非 AMD 的 JS

RequireJS 加载的 JS 要求是 AMD 规范的,但是非 AMD 规范的 JS 文件也能够加载,下面就以 Util.js 中定义了类 Rect,Circle 和普通函数 greeting() 为例,演示 RequireJS 对于非 AMD 规范的 JS 的配置,加载以及使用。

可以看到,使用 RequireJS 加载的 JS 中的类和函数,与使用 <script src="/js/Util.js"> 加载时的使用方式没有区别,如果要以 AMD 的方式使用非 AMD 的 JS,可以参考 http://www.bubuko.com/infodetail-671521.html

RequireJS 配置

1
2
3
4
5
6
// 文件名: require-config.js
require.config({
paths: {
Util: '/js/Util'
}
});

不需要 shim 和 exports,如果 Util 依赖 jQuery 的话,就需要 shim 了,例如

1
2
3
4
5
6
7
8
9
10
11
require.config({
paths: {
jquery: '/lib/jquery',
Util: '/js/Util'
},
shim: {
Util: {
deps: ['jquery']
}
}
});

网页

1
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
<!-- 文件名: b.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="/lib/require.js"></script>
<script src="/js/require-config.js"></script>
<script>
require(['Util'], function() { // 不需要 module 的名字
// 使用 RequireJS 加载的 Util.js 中的类和函数,与使用 <script src="/js/Util.js"> 加载时的使用方式没有区别
var rect = new Rect(10, 20, 50, 50); // 创建类的对象
console.log(rect.pos()); // 成员函数调用
var circle = new Circle(0, 0, 20);
console.log(circle.area()); // 成员函数调用
Circle.foo(); // 类函数调用
greeting(); // 普通函数调用
});
</script>
</body>
</html>

普通 JS 文件

1
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
// 文件名: Util.js
// [1] 类 Rect
function Rect(x, y, width, height) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
}
Rect.prototype.pos = function() {
return {
x: this.x,
y: this.y
};
};
// [2] 类 Circle
function Circle(x, y, radius) {
this.x = x;
this.y = y;
this.radius = radius;
}
// 成员函数
Circle.prototype.area = function() {
return 3.1415 * this.radius * this.radius;
};
// 类的函数
Circle.foo = function() {
console.log('Circle::foo()');
};
// [3] 普通函数
function greeting() {
console.log('Greeting...');
}

测试

访问 http://localhost/b.html,输出

1
2
3
4
{x: 10, y: 20}
1256.6000000000001
Circle::foo()
Greeting...