Javascript模块化编程-require.js[3]
很多情况下,JS都是放到一个或者多个文件里,只要加载这些文件就可以了。
但是对于一些小型项目而言,这种写法是没有任何问题的。
但是对于某些大型网站,JS的量是很大的,如果还采用这种方式,网站时常在加载时,出现假死的现象。
为了解决这个问题,require.js应运而生。
1、require.js的核心
1、实现js文件异步加载,避免网站失去响应。
2、管理模块之间的依赖性,便于代码的编写和维护。
2、require.js的加载
在网页加载require.js时,需要实现如下写法:
<script src="js/require.js" defer async="true" data-main="js/jsname"></script>
defer兼容IE。
async=“true”兼容其它常规浏览器。
data-main属性的作用:加载当前网页的主模块。
3、主模块的写法
主模块即当前网页的主程序。
主模块依赖其它模块,此时,需要AMD规范定义require()函数。
Eg:
require(['moduleA','moduleB','moduleC',function(moduleA,moudleB,moduleC){
//...
}]);
第一个参数:所依赖的各个模块的全局名称。
第二个参数:回调函数,当前模块加载成功后,该函数将被调用。加载模块会以参数的形式传入改函数。
4、模块的配置
require.config()方法,实现了对模块加载行为的自定义。require.config()定义在主模块的头部。
Eg:
require.config({
paths:{
"jquery":"juqery.min",
...
}
});
如果子模块在主模块的同级目录的子目录下,那写法为:
Eg:
require.config({
paths:{
"jquery":"lib/juqery.min",
...
}
});
或
require.config({
baseUrl:"js/lib",
paths:{
"jquery":"lib/juqery.min",
...
}
});
require.js要求,每个模块是一个单独的js文件。如果加载多个模块时,此时需要发出多次http请求,那么加载速度方面就会大大折扣。
require.js提供了一个优化工具,当模块部署完毕后,可以用这个工具将多个模块合并在一个文件中。
5、AMD模块写法
require.js加载的模块,采用AMD规范。
定义模块,需要采用特定的define()函数来定义,以test.js为例。
定义不依赖其它模块的写法:
define(function(){
var fn1=function(obj){
return obj;
};
return{
op:fn1
};
});
定义依赖其它模块的写法:
define(['mytest'],function(mytest){
function test(){
//...
}
return {
ta:test
};
});
主模块或者别的模块调用的写法:
require(['test'],function(test){
//...
});
6、非AMD规范模块写法
理论上,require.js加载模块,必须按照AMD规范、必须用define()函数定义模块。
例如:JQuery等。,现实环境中,也会出现非AMD规范的模块,require.js也实现了对非AMD规范的模块的兼容。
实现对非AMD模块的兼容,需要用require.config()进行配置,定义他们的特征。
Eg:
jQuery插件可以这样定义:
require.config({
shim:{
'jQuery.scroll':{
deps:['jQuery'],
exports:'jQuery.fn.scroll'
}
}
});
deps,模块的依赖。
exports,输出的变量名,别的模块调用这个模块时的名称。
7、require.js插件
require.js还提供了一些插件。
json和mdown插件。
domready插件,可以让回调函数在也页面DOM结构加载完成后再运行。
Eg:
require(['domready!'],function(doc){
//...
});
text和image插件,允许require.js加载文本和图片文件。
define(
['text!review.txt','image!cat.jpg'],
function(review,cat){
console.log(review);
document.body.appendChild(cat);
}
);
【上一章节】 【下一章节】