一、为什么使用RequireJS？
<script src="https://www.jb51.net/article/a.js"></script> <script src="https://www.jb51.net/article/b.js"></script> <script src="https://www.jb51.net/article/c.js"></script>
上述多个js文件加载的时候，浏览器会停止网页渲染(JS阻塞浏览器渲染)，加载文件越多，网页失去响应的时间就会越长；另外各文件的依赖关系很难管理。
RequireJs的作用：
（1）实现js文件的异步加载，避免网页失去响应；
（2）管理模块之间的依赖性，便于代码的编写和维护。
（3）定义了一个作用域来避免全局名称空间污染。
二、require.js的加载
1.从官网下载最新版本的require，放在js目录下，使用script引入页面：
<script src="https://www.jb51.net/js/require.js"></script>
为了不阻塞页面渲染，可以把它放在HTML的最底部或改为如下方式：
<script src="https://www.jb51.net/js/require.js" defer async="true" ></script>
async属性表明该文件需异步加载（defer属性兼容IE）。
2.加载页面逻辑代码：
假定代码文件是main.js，也放在js目录下，则用如下几种方式引入：
方式1：
<script data-main="js/main" src="https://www.jb51.net/js/require.js"></script>
data-main属性指定网页程序的主入口，这个文件会第一个被requirejs加载。requirejs默认所依赖的资源都是js，所以可以把main.js简写成main。
方式2：
在加载require.js后，通过requirejs加载config配置文件（如有），最后加载主模块：
require([‘configUrl'],function () { //config.js必须通过requirejs加载才能注册 require([moduleAName],function(moduelA){ //逻辑代码 }) });
三、主模块的写法
// main.js require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){ // some code here });
require()函数接受两个参数，第一个参数是一个数组，表示当前模块所依赖的模块；第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该回调函数，从而在回调函数内部就可以使用这些模块（被依赖的模块有return的值）。
require()异步加载moduleA，moduleB和moduleC，浏览器不会失去响应；它指定的回调函数，只有当前面依赖的模块全部下载并执行对应的回调之后，才会运行。
四、模块的配置
require.config()方法可以定义模块的路径，并以短模块名的形式进行依赖的定义。该方法可以写在每个主模块（main.js）的前面，配合主模块一起使用。
参数是一个对象，这个对象的paths属性指定各个模块的加载路径。paths可以配置多个路径，如果远程cdn库没有加载成功，则加载本地的库。
如果不定义模块的配置，则在主模块中的依赖需要写完整路径。
在每个页面按需配置路径：
require.config({ //注册模块的配置，供后面的代码使用 baseUrl: '/js/', paths: { "jquery":”cdnUrl”, "Jquery/jquery-1.12.0.min" "fixheight": "login/fixheight" } }); require(['jquery', 'fixheight'], function ($, fixHeight) { ...other code; fixHeight.init(); });
或者将config配置作为一个单独的js文件，然后
require([“configJsUrl”],function(){ //需要在main文件中通过require先异步加载模块配置 require([‘ModuleName'],function(Name){ …other code }) })
为了避免每个页面都要嵌套require，还可以用如下方式：
先创建单独的config.js文件：
require.config({ //注册模块的配置，供后面的代码使用 baseUrl: "/js/app/", //其他依赖都是对于此位置的相对路径 // 路径配置 paths: { underscore: 'vender/underscore.min', backbone:'vender/backbone.min' jquery: ‘cdnUrl','vender/jquery/jquery-1.12.0.min', “模块短名”:”相对于baseUrl的路径地址，省略模块文件的后缀.js” }, // 非AMD模式编写的类库需要重新配置 shim: { underscore: { exports:'_' }, backbone（短模块名仍需要定义路径）: { exports: 'Backbone', //类库输出的变量名，表明这个模块被外部调用时的名称 deps:['jquery','underscore'] //该模块的依赖 } }, urlArgs: "bust=" + document.getElementById('publishDate').attributes['value'].value //js资源的参数，控制版本刷新缓存 }); define([ 'marionette'], function () { }); //仍是会被执行的js代码，会依次加载需要的模块
然后通过如下方式使用：
<script data-main="js/config" src="https://www.jb51.net/js/require.js"></script>
通过主入口直接将模块配置注册到requirejs命名空间中，页面中后续的require方法无需再注册，可以直接使用短模块名进行依赖加载。