AMD-require.js的用法

为什么要使用require.JS？

<script  src="sript1.js"></script>
<script  src="sript2.js"></script>
<script  src="sript3.js"></script>
<script  src="sript4.js"></script>
<script  src="sript5.js"></script>

如果一个页面需要引入多个脚本，需要相互依赖。依赖性越大的脚本需要加到越深的位置。如果脚本文件非常大，页面会暂时的 出现空白。

require.js的诞生，就是为了解决这两个问题：

（1）实现js文件的异步加载，避免网页失去响应；

（2）管理模块之间的依赖性，便于代码的编写和维护。

require.js的用法

我将在练习require.JS时的demo上传到github上：https://github.com/zhtzjz/require.JS

1.需要先引入require.JS并且设置入口文件:

<script data-main="index" defer async="true" src="../require.js"></script>

2.在入口中引入模块

require(['./module1.js'],function(mod){
console.log(mod.math(2,5));
});

3.定义模块文件

var math=function(a,b){
return a+b
};
define(function(){
return {
math:math
}
});
console.log(2);

4.require.config里面的paths属性

使用require.config()方法，我们可以对模块的加载行为进行自定义。require.config()就写在主模块（main.js）的头部。参数就是一个对象，这个对象的paths属性指定各个模块的加载路径。

require.config({
paths:{
moduleA:'module1'
}
});

require(['moduleA'],function(mod){
console.log(mod.math(2,5));
});

5.require.config-baseUrl

目录结构如下所示:



在入口文件中配置路径时：

require.config({
baseUrl:'js/',
paths:{
moduleA:'module1'
}
});

//以上方法等同于:
//require.config({
// paths:{
//   moduleA:'js/module1'
//  }
//});

require(['moduleA'],function(mod){
console.log(mod.math(2,5));
});

6.在定义模块时需要依赖：

//module1.js

var math=function(a,b){
return a+b
};
define(function(){
return {
math:math
}
});

//madule2.js

define(['moduleA'],function(obj){
return {
num:obj.math(2,5)
}
});

入口文件：

require.config({
baseUrl:'js/',
paths:{
moduleA:'module1',
moduleB:'module2'
}
});

require(['moduleB'],function(mod){
console.log(mod.num);
});

7.require.config-shim解决加载非AMD规范框架

入口文件：

require.config({
baseUrl:'js/',
paths:{
moduleA:'module1',
jquery:'jquery-1.11.1.min'
},
shim:{
jquery:{
deps:[],
exports:'$'  //输出的变量，在需要引入jq时使用$
}
}
});

require(['moduleA'],function(mod){
mod.append();
});

//module1.js

define(['jquery'],function($){
return {
append:function(){
$('body').append('<div>hellow,world</div>');
}
}
});