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);

}

);

【上一章节】  【下一章节】