requireJS学习笔记总结
一． 为什么要用requireJS
随着项目发展，JS文件越来越大，需要分成多个js文件。
首先，上面这种方式网页加载的时候，浏览器会停止对网页的渲染，加载文件越多，网页失去响应的时间就会越长；
其次，由于js文件之间存在依赖关系，因此必须严格保证加载顺序，依赖性最大的模块一定要放到最后加载。
requireJS就很好的解决了上面两个问题
1）.实现js文件的异步加载，避免网页失去响应。
2）.管理模块之间的依赖性，便于代码的编写和维护。
二．什么是requireJS
1. RequireJS是一个javascript文件和模块框架，可以从http://require.org下载，它支持浏览器和像node.js之类的服务器环境。使用requireJS，可以顺序读取相关依赖模块。
async属性表示这个文件需要异步加载，避免网页失去响应。defer只兼容IE，所以把defer也写上。
2.
data-main属性：指定网页程序主模块，当requireJS被加载的时候，他会使用data-main属性去搜寻一个脚本文件即main.js。这个文件会第一个被require.js文件加载。
data-main需要给所有的脚本文件设置一个根路径。根据这个根路径，requireJS将会去加载所有相关的模块。由于require.js默认文件后缀是js,所以可以把main.js简写成main。
RequireJS所做的是，在使用script标签加载你定义的依赖时，将这些依赖通过head.appendChild()函数来加载他们。当依赖加载以后，RequireJS计算出模块定义顺序，并按正确的顺序进行调用。这意味着你仅仅只定义一个‘根’来读取你所需要的依赖，为了正确使用这些依赖，require.js加载的模块都需要使用RequireJS的API，也就是模块必须采用特定的define()函数来写模块。
RequireJS API存在于requireJS载入时创建的命名空间requirejs下，就是AMD规范的运用。AMD就是一种对模块的定义，使模块和它的依赖可以被异步加载，但又按照正确的顺序。API 主要是下面三个函数：
define：该函数主要用于创建模块。
require：该函数用于读取依赖。
config：该函数用于配置requireJS
如果一个模块不依赖其他模块，那么可以直接定义在其define()函数之中：
假如现在有一个math.js文件，定义了math模块，那么定义math.js如下：
//math.js
define（function(){
var add=function(a,b){
return a+b;
};
}）
//加载math.js模块
require(['math'],function(math){
alert(math.add(1,2));
});
如果math还依赖其他模块，那么define（）函数的第一个参数必须是一个数组，指明该模块还依赖其他模块。
当require（）函数加载math模块的时候，就会先加载math依赖的模块。
3. 加载完require.js后，来看一下如何通过require.config函数来配置main.js需要加载的模块。
config的参数就是一个对象。这个可选参数对象包括了许多配置参数选项。下面是一些可以使用的配置：
baseUrl——用于加载模块根路径。
paths——用于映射不存在根路径下面的模块路径。
shims——配置模块外面并没有使用RequireJS的函数定义时，但是你还是想通过requireJS来使用他。那么就需要在配置中把它定义为一个shim.
exports—— 输出的变量名，表示这个模块外部调用时的名称
deps——加载依赖关系数组。
require.config({
baseUrl:'application/views/frontEnd/build/'
,paths:{ //paths用于映射不存在根路径下面的模块路径
text:'lib/require/text'
,jquery:'lib/jquery-1.9.0.min'
}
,shim:{ //专门用来配置不兼容的模块
'jquery': {
exports: 'jquery' //exports 输出的变量名，表示这个模块外部调用时的名称
}
,'jquery_icheck': {
deps: ['jquery'] //deps数组，表明该模块依赖上面的jquery模块。
,exports: 'jquery_icheck'
}
}
});
三．require.js的插件
domready插件，可以让回调函数在页面DOM结构加载完成后在运行。
text和image插件，允许require.js加载文本和图片：
define([
'text!oTxt.txt',
'image!oImg.jpg'
],function(){
document.body.appendChild(oImg);
document.write(oTxt);
});
四.一、简单事例的项目目录如下：
-index.html
-scripts文件夹
–controller文件夹
— mianController.js
— controller1.js
—controller2.js
–directives文件夹
—mainDirective.js
—directive.js
–app.js
–router.js
–main.js
回到顶部
二、首页
首先你的index.html大概如下