RequireJS 是一个JavaScript模块加载器，他的目标是鼓励代码的模块化，它使用了不同于传统<script>标签的脚本加载步骤。可以用它来加速、优化代码，但其主要目的还是为了代码的模块化。
先看下面示例：
大家都知道js阻塞浏览器渲染，就是在加载页面内容时，遇到JS，在加载JS时，会停止对页面的加载，等JS加载完了，才会继续对页面进行加载，这样就会导致页面加载时间过长，使用RequireJS，就可以解决这个问题
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/require.js" data-main='js/main.js' type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="">
fdfdfdfdfd
</div>
</body>
</html>
a.js:
alert('');
main.js:
require.config({
paths:{
a:'a'
}
});
require(['a']);
在执行alert的时候页面内容已经加载出来了
require.js 可以防止js加载阻塞页面渲染
基本API
require会定义三个变量：define,require,requirejs，其中require === requirejs，一般使用require更简短
- define 从名字就可以看出这个api是用来定义一个模块
- require 加载依赖模块，并执行加载完后的回调函数
大家可以看见页面顶层<script>标签含有一个特殊的属性data-main，这里就是入口JS，require.js使用它来启动脚本加载过程
main.js
require.config({//配置模块加载位置-也就是要加载JS的路劲，不用后缀.js
paths:{//通过paths的配置会使我们的模块名字更精炼，paths还有一个重要的功能，就是可以配置多个路径，如果远程cdn库没有加载成功，可以加载本地的库，如：
'jquery':["http://libs.baidu.com/jquery/2.0.3/jquery","jquery-1.7.min"],
'base':'g-ZFbase'
}
});
require(['jquery'], function() {
//这样jquery 不是全局的，你要使用的时候通过require调用，如下
$('div').click(function(){
alert($(this).html());
});
});
require(['jquery','base'], function($,base) {
//在比如我自己封装了一个g-ZFbase.js，要用里面的ajax，ajax在ajax()方法里,但是他依赖于jquery,
//可以2个一起调用
ajax();
});
define: 定义一个模块，然后再页面中使用：
例如：在a.js里定义一个define
a.js:
define(['jquery','base'],function($,base){
//如上，我要用g-ZFbase.js里的ajax()方法，他依赖于jquery，所以2个一起调用
ajax();
});
在main.js里：
require.config({//配置模块加载位置-也就是要加载JS的路劲，不用后缀.js
paths:{//通过paths的配置会使我们的模块名字更精炼，paths还有一个重要的功能，就是可以配置多个路径，如果远程cdn库没有加载成功，可以加载本地的库，如：
'jquery':["http://libs.baidu.com/jquery/2.0.3/jquery","jquery-1.7.min"],
'base':'g-ZFbase',
a:'a'
}
});
//require(['jquery','base'], function($,base) {
// //在比如我自己封装了一个g-ZFbase.js，要用里面的ajax,但是他依赖于jquery,
// //可以2可一起调用
// ajax();
//});
require(['a']);
就相当于原来在main.js里写的内容单独写到一个JS文件里把他看成一个模块，然后调用，这里把他放在了a.js里面了
一个JS文件里只能放一个define，一个define只能有一个返回值/对象
调用define 中的方法：
main.js:
require.config({//配置模块加载位置-也就是要加载JS的路劲，不用后缀.js
paths:{//通过paths的配置会使我们的模块名字更精炼，paths还有一个重要的功能，就是可以配置多个路径，如果远程cdn库没有加载成功，可以加载本地的库，如：
'jquery':["http://libs.baidu.com/jquery/2.0.3/jquery","jquery-1.7.min"],
'base':'g-ZFbase',
a:'a'
}
});
require(['a'],function(obj){//obj-接收返回值,名字可不和返回值同名
obj.t1();
});
a.js:
define(function(){
function test(){
alert('test');
}
function t(){
alert('t');
}
var obj = {
t1:test,
t2:t
}
return obj;
})
只有一个调用函数，可直接返回函数名 return t;