require.js的学习笔记

require.js

为什么要用require.js

1. 实现js文件的异步加载，避免网页失去响应
2. 管理模块之间的依赖性，便于代码的编写和维护

require.js的加载

 <script src="js/require.js" defer async="true" ></script>

这样使requrie.js也被异步加载，IE不支持async，只支持defer.

加载require.js后，下一步加载自己的代码，假设自己的代码文件是main.js，同时放在和require.js相同的js目录下，只需要如下：

 <script src="js.require.js" data-main="js/mian"><script>

由于require.js默认文件后缀名是js，所以可以把main.js简写成main.

主模块的写法

main.js称为主模块，意为整个网页的入口代码，一般情况下，主模块依赖于其他模块，使用AMD规范定义的require()函数。

 // main.js
 requrie(['moduleA', 'moduleB', 'moduleC'], function(moduleA, moduleB, moduleC){
    // some code 
 });

require([module],callback)函数接受两个参数，第一个参数是一个数组，表示所依赖的模块，第二个参数是一个回调函数。加载的模块会以参数形式传入回调函数，从而可以在其内部使用。

模块的加载

默认情况下，require.js假定加载的模块与主模块(main.js)在同一个目录，然后自动加载。

使用require.config()方法，可以对模块的加载行为进行自定义。require.config()写在主模块(main.js)的头部，参数是一个对象，该对象的paths属性指定各个模块的加载路径。

指定模块加载路径有两种方法：

1. 逐一指定路径
 require.config({
    paths: {
        "moduleA": "lib/moduleA",
        "moduleB": "lib/moduleB",
        "moduleC": "lib/moduleC"
    }
 });

2. 直接改变基目录(baseUrl)
 require.config({
    baseUrl: "js/lib",
    paths: {
        "moduleA": "moduleA",
        "moduleB": "moduleB",
        "moduleC": "moduleC"
    }   
 });
 ```
 也可以直接指定模块的网址

require.js要求，每个模块是一个单独的js文件。

###AMD模块的写法
require.js加载的模块，采用AMD规范，意味着模块必须按照AMD规定来写。
模块必须采用define()函数来定义，如果一个模块不依赖其他模块，可以直接定义在define()函数中。如果这个模块还依赖其他模块，那么define()函数的第一个参数，必须是一个数组，指明模块的依赖性。

###加载非规范的模块
加载非AMD规范的模块时，要在用require()加载之前，先用require.config()定义模块的特征。

require.config({
angularRoute: {
deps: [“angular”],
exports: “angular”
},
shim: {
‘zepto’: {
exports: “$”
}
}
})
“`
require.config()接受的配置对象除了paths属性外，还有shim属性，专门用来配置不兼容的模块。
对于不兼容的模块，需要定义：
（1）exports值(输出的变量名)，表明这个模块外部调用的名称
（2）deps数组，表明该模块的依赖性

参考资料：

1. Javascript模块化编程（一）：模块的写法
2. Javascript模块化编程（二）：AMD规范
3. Javascript模块化编程（三）：require.js的用法