RequireJS 是一个非常小巧的 javascript 模块载入框架,是AMD(Asynchronous Module Definition, 异步模块加载机制)规范最好的实现之一。
使用requireJS(AMD)异步加载
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/require2.1.11.js"></script>
<script type="text/javascript">
require(["js/test-01"]);
</script>
</head>
<body>
<h1>Hello requireJS</h1>
</body>
</html>
test-02.js文件
define(function(){
function fn1() {
alert("Hello requirejs~~~");
}
fn1();
});
基本API
requireJS 会定义三个变量: define、 require、 requirejs。
- require === requirejs,一般使用 require 更简短。
2.define 从名字就可以看出这个 api 是用来定义一个模块。
3.require 加载依赖模块,并执行加载完后的回调函数。
创建的test-02.js即是定义的模块
之前的例子中加载模块都是本地 js,但是大部分情况下网页需要加载的 JS 可能来自本地服务器、其他网站或 CDN,这样就不能通过这种方式来加载了,我们通过定义require的config方法实现对外部js文件的配置:
require.config({
paths : { //这样配置,减轻本地服务器的压力
"jquiry": "",
"test1" : "js/test-01",
"test2" : "js/test-02"
}
});
require(["test1","test2"]);
那么在引用外部js文件时,就不需要书写过多的js标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="lib/require2.1.11.js"></script>
<script src="js/config.js"></script>
</head>
<body>
<h1>Hello requireJS</h1>
</body>
</html>
1.引入requireJS源代码
2.require这个方法==requireJS 功(只有所有模块都加载成功,才会回调)
(3)是一个回调函数,加载失败
使用define的形式代替闭包函数.