一、require.js的下载
版本:require.js 2.1.11
地址:http://requirejs.org/docs/release/2.1.11/minified/require.js (右键另存为)
二、require.js的加载
新建一个文件夹,如requireTest,内部再创建一个名为js的文件夹,放置require.js文件。
在requireTest中创建一个test.html文件。内容如下
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script src="js/require.js" data-main="js/main"></script>
</body>
</html>
其中,src指向的是文件夹js下的require.js文件,data-main指向的是文件夹js下的main.js文件。这里会先加载require.js,后加载main.js。
然后我们在文件夹js下创建main.js。内容如下
alert("加载成功!");
打开test.html效果如下
这时,对require.js和main.js的加载已经成功了。
三、主模块的写法
刚才讲到的main.js,称为"主模块",意思是整个网页的入口代码。它有点像C语言的main()函数,所有代码都从这儿开始运行。
刚才直接在main.js中加入alert("加载成功!") ,网页能直接输出结果,说明是可以直接写入javascript。但是,如果只是这样使用的话,就不需要require.js了。
真正常见的情况是,主模块依赖于其他模块,这时就要使用AMD规范定义的的require()函数。
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
// some code here
});
require(['math', 'jquery','underscore','handlebars','backbone'], function (math, $,underscore,handlebars,backbone) {
<pre code_snippet_id="1593584" snippet_file_name="blog_20160301_3_6182762" name="code" class="html">// some code here
});
require.js会先加载jQuery、underscore和backbone,然后再运行回调函数。主模块的代码就写在回调函数中。
四、模块的加载
上示例中,主模块的依赖模块是['math', 'jquery','underscore','handlebars','backbone']。默认情况下,require.js假定这三个模块与main.js在同一个目录,文件名分别为 jquery.js,underscore.js,handlebars.js和backbone.js,然后自动加载。
使用require.config()方法,可以对模块的加载行为进行自定义。require.config()就写在主模块(main.js)的头部。参数就是一个对象,这个对象的paths属性指定各个模块的加载路径。
require.config({
paths: {
"jquery": "jquery",
"underscore": "underscore",
"handlebars": "handlebars",
"backbone": "backbone"
}
});
require.config({
paths: {
"jquery": "jquery",
"underscore": "lib/underscore",
"handlebars": "lib/handlebars",
"backbone": "lib/backbone"
}
});
如果所有js文件都在lib文件目录下,
require.config({
baseUrl: "js/lib",
paths: {
"jquery": "jquery",
"underscore": "underscore",
"handlebars": "handlebars",
"backbone": "backbone"
}
});
五、AMD模块的写法
require.js加载的模块,采用AMD规范。也就是说,模块必须按照AMD的规定来写。
具体来说,就是模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块,那么可以直接定义在define()函数之中。
假定现在有一个math.js文件,它定义了一个math模块。那么,math.js就要这样写:
define(function () {
var add = function (x, y) {
return x + y;
};
return {
add: add
};
});
加载方法如下:
require(['math'], function (math){
alert(math.add(1,1));
});