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);
}
);
【上一章节】 【下一章节】