RequireJS中文网
AMD
AMD是”Asynchronous Module Definition”的缩写,意思就是”异步模块定义”。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。
RequireJS优点
- 模块化加载
- 防止JS加载阻塞页面渲染
基本API
RequireJS会定义三个变量。define,require,requirejs,其中require === requirejs。
- define用来定义模块
- require用来加载依赖模块,并执行加载后的回调函数
define(function(){
function fun1(){
alert(1);
}
fun1();
});
require依赖是一个数组,即使只有一个依赖也必须使用数组来定义。require第二个参数是一个callback,一个function,用来处理加载完毕后的逻辑。
require(["js/a"],function(a){
var A = a ;
alert("load finish");
});
加载文件
require.config用来配置模块加载位置。可以配置多个路径,如果远程CDN库没有加载成功,可以加载本地库。
require.config({
paths:{
"jquery":["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
"a":"js/a"
}
});
require(["jquery","a"],function($,a){
$(function(){
alert("load finish");
});
});
- 使用requirejs加载模块时候不用写.js后缀
RequireJS加载
下载requirejs,下载后,假定把它放在js子目录下面,就可以加载了。
<script src="js/require.js"></script>
有人可能会想到,加载这个文件,也可能造成网页失去响应。解决办法有两个,一个是把它放在网页底部加载,另一个是写成下面这样:
<script src="js/require.js" defer async="true" ></script>
async属性表明这个文件需要异步加载,避免网页失去响应。IE不支持这个属性,只支持defer,所以把defer也写上。
全局配置
requirejs提供一个主数据的功能。首先创建一个main.js
require.config({
paths:{
"jquery":["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
"a":"js/a"
}
});
然后在页面中使用下面的方法来使用requirejs
<script data-main="js/main" src="js/require.js"></script>
data-main指定的js将在加载完require.js后处理,我们把require.config的配置加载data-main后,就可以使用每一个页面都使用这个配置,然后页面中就可以直接使用require来加载所有的短域名。
data-main还有另一个功能。require会默认把data-main指向的js为根路径。如果data-main=”js/main”,那require([“jquery”])后会自动加载js/jquery.js这个文件。相当于默认配置了
require.cofig({
baseUrl:"js"
})
map
对于给定的模块前缀,使用一个不同的模块ID来加载该模块。
该手段对于某些大型项目很重要:如有两类模块需要使用不同版本的”foo”,但它们之间仍需要一定的协同。 在那些基于上下文的多版本实现中很难做到这一点。而且,paths配置仅用于为模块ID设置root paths,而不是为了将一个模块ID映射到另一个。
requirejs.config({
map: {
'some/newmodule': {
'foo': 'foo1.2'
},
'some/oldmodule': {
'foo': 'foo1.0'
}
}
});
如果各模块在磁盘上分布如下:
- foo1.0.js
- foo1.2.js
- some/
- newmodule.js
- oldmodule.js
当“some/newmodule”调用了“require(‘foo’)”,它将获取到foo1.2.js文件;而当“some/oldmodule”调用“`require(‘foo’)”时它将获取到foo1.0.js。
第三方模块
通过require加载的模块一般都要符合AMD规范,即使用define来申明的模块。但是部分需要加载非AMD规范的js,就需要使用到shim。exports值(输出的变量名),表明这个模块外部调用时的名称;deps数组,表明该模块的依赖性。
require.config({
shim:{
"underscore":{
exports:"_";
},
"jquery.form":{
deps:["jquery"]
}
}
});
这样配置后,我们就可以在其他模块使用underscore模块了:
require(["underscore","jquery.form"],function(){
_.each([1,2,3],alert);
});
或者
require(["underscore"],function(Underscore){
Underscore.each([1,2,3],alert);
});
RequireJS插件
domready插件,可以让回调函数在页面DOM结构加载完成后再运行。
require(['domready!'], function (doc){
// called once the DOM is ready
});
text和image插件,则是允许require.js加载文本和图片文件。
define([
'text!review.txt',
'image!cat.jpg'
],
function(review,cat){
console.log(review);
document.body.appendChild(cat);
}
);