require.js
require.js
一、为什么要用require.js？
为了解决加载多个js文件时，浏览器停止网页渲染；js文件文件必须严格按顺序加载，这样当依赖关系很复杂时，代码的编写和维护都会变得困难。
实现js文件的异步加载，避免网页失去响应；管理模块之间的依赖性。
二、require.js的加载（假定放在js的子目录下）
1） <script src="js/require.js"></script>
解决加载这个文件造成的网页失去响应，方法有：一是把它放在网页底部加载，另一个是写成<script src="js/require.js" defer async="true" ></script>
2） 下面加载自己的代码，例main.js,放在js的子目录下：<script src="js/require.js" data-main="js/main"></script>
data-main的属性作用是，指定网页程序的主模块（整个网页的入口代码）
三、主模块的写法
1） 主模块依赖于其他模块，这时就要使用AMD（"Asynchronous Module Definition" 异步模块定义） 规范定义的的require()函数。
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
// some code here
});
第一个参数是一个数组，表示所依赖的模块；第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块。 （解决依赖性的问题）
例： require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
// some code here
});
require.js会先加载jQuery、underscore和backbone，然后再运行回调函数。主模块的代码就写在回调函数中。
四、模块的加载
主模块的依赖模块是['jquery', 'underscore', 'backbone']。默认情况下，require.js假定这三个模块与main.js在同一个目录，文件名分别为jquery.js，underscore.js和backbone.js，然后自动加载。
使用require.config()方法，我们可以对模块的加载行为进行自定义。require.config()就写在主模块（main.js）的头部。参数就是一个对象，这个对象的paths属性指定各个模块的加载路径。 lib/若在js/lib目录下也可直接改变基目录（baseUrl）
require.config({
baseUrl: "js/lib",
paths: {
"jquery": " lib/jquery.min",
"underscore": " lib/underscore.min",
"backbone": " lib/backbone.min"
}
});
五、require.js的配置
index.html：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Angular & Requirejs</title>
</head>
<body>
<div id="container" ng-view></div>
<script data-baseurl="./" data-main="main.js" src="libs/require.js" id="main"></script>
</body>
</html>
main.js：
'use strict';
(function (win) {
//配置baseUrl
var baseUrl = document.getElementById('main').getAttribute('data-baseurl');
/*
* 文件依赖
*/
var config = {
baseUrl: baseUrl, //依赖相对路径
paths: { //如果某个前缀的依赖不是按照baseUrl拼接这么简单，就需要在这里指出
underscore: 'libs/underscore',
angular: 'libs/angular',
'angular-route': 'libs/angular-route',
text: 'libs/text' //用于requirejs导入html类型的依赖
},
shim: { //引入没有使用requirejs模块写法的类库。例如underscore这个类库，本来会有一个全局变量'_'。这里shim等于快速定义一个模块，把原来的全局变量'_'封装在局部，并导出为一个exports，变成跟普通requirejs模块一样
underscore: {
exports: '_'
},
angular: {
exports: 'angular' // exports值（输出的变量名），表明这个模块外部调用时的名称；
},
'angular-route': {
deps: ['angular'], //deps数组，表明该模块的依赖性。
exports: 'ngRouteModule'
}
}
};
require.config(config); //require.config()接受一个配置对象
require(['angular', 'router'], function(angular){ //引入angular和angular的路由配置
angular.bootstrap(document, ['webapp']);
});
})(window);
