require.js
RequireJS由James Burke创建，他也是AMD规范的创始人。
RequireJS 遵循的是 AMD（异步模块定义）规范
实现了js的异步加载和模块之间的依赖性
define方法用于定义模块，RequireJS要求一个模块就是一个单独的文件。
预加载，硬加载，提前加载
一：基本使用
1:头部引入：
<script src="js/require.js"></script>
2:底部引入：
async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer，所以把defer也写上。
<script src="js/require.js" defer async="true" ></script>
3:添加入口文件：main.js
<script src="js/require.js" data-main="js/main"></script>
data-main属性的作用是，指定js代码的主模块。
4:main.js：
require(["m1","m2","m3"],function("m1","m2","m3"){
//coding...
})
require()函数接受两个参数。
- 第一个参数是一个数组，表示所依赖的模块，上例就是['m1', 'm2', 'm3']，即主模块依赖这三个模块；
第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用执行。
require(["jquery","underscore","backbone"],function($,_,Backbone){
//coding...})
5:例子
html：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script data-main="main" src="http://apps.bdimg.com/libs/require.js/2.1.11/require.min.js"></script>
</head>
<body>
</body>
</html>
main.js:
require(["./base"],function(base){
"use strict";
console.log("main run")
var result = base.getMax(1,2);
console.log("比较结果:",result)
});
base.js:
define(function(){
console.log("base run")
var getMax = function(a,b){
"use strict";
return Math.max(a,b)
}
return {
getMax:getMax
}
})
浏览器打开页面输出结果：
base run
main run
比较结果: 2
二：高级用法之reuqire.config()
通过reuqire.config()方法，可以对模块的加载行为进行重新定义，该方法既可以写在main.js的顶部，也可以单独写在一个文件里面，其里面的参数是一个对象
paths属性：指定各个模块的加载路径
require.config({
paths:{
"juqery":"js/jquery.min",
"underscope":"js/underscope",
"backbone":"js/backbone"
}
})
直接指定url：
require.config({
paths:{
"jquery":"http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"
}
})
baseUrl属性：指定文件的公用地址
require.config({
baseUrl:"js/"
paths:{
"juqery":"jquery.min",
"underscope":"underscope",
"backbone":"backbone"
}
})
shim属性：配置不兼容的模块
require.js加载的模块理论上来说是按照AMD规范通过define来定义的，比如jquery，但是对于一些比如说underscope和backbone等没有通过AMD规范定义的库，用require加载之前，先要通过require.config()方法来重新定义符合规范的写法
require.config({
baseUrl:"js/",
paths:{
"juqery":"jquery.min",
"underscope":"underscope",
"backbone":"backbone"
},
shim:{
"underscope":{
exports:"_"
},
"backbone":{
deps:["underscore","jquery"],
exports:"Backbone"
}
}
})
- 每个不规范模块要定义exports值（输出的变量名），表明这个模块外部调用时的名称；
- deps数组，表明该模块的依赖性。