RequireJS是什么

RequireJS是以一个工具库，主要用于客户端的模块管理。它可以让客户端的代码分成一个个模块，实现异步或动态加载，从而提高代码的性能和可维护性。
Require的基本思想
- 通过define 方法，将代码定义为模块；
- 通过require 方法，实现代码的模块加载；
RequireJS是一个非常小巧的JavaScript模块载入模块，是AMD规范的实现者之一。压缩后14k左右。它还可以同时和其他的框架协同工作。

RequireJS可以做什么

声明不同js文件之间的依赖关系
可以按需、并行、延时载入js库
可以让我们的代码以模块化的方式组织

RequireJS如何用

在HTMl中，添加：

<script src="/path/to/require.js" data-main="/path/to/app/config.js"></script>

通常使用requirejs的话，我们只需要导入requirejs即可，不需要显式导入其他的js库，因为这个工作会教给requirejs来做。
属性data-main 告诉requirejs：你下载完以后，马上去载入真正的入口文件。它一般用来对 requirejs 进行配置，并且载入真正的程序模块。

使用RequireJS加载JavaScript文件

案例一：加载JavaScript文件

<script src="./js/require.js">
    <script>
        require(["./js/a.js", "./js/b.js"], function(){
        myFunctionA();
        myFunctionB();
        });
    </script>
</script>

require方法里的字符串数组参数允许不同的值，当字符串是以.js结尾，或以/ 开头，或是一个url时，RequireJS会认为用户是在直接加载一个JS文件；否则，当字符串是类似my/modyle时，他会认为这是一个模块，并且会以用户配置的baseUrl和paths来加载相应的模块所在的JS文件。
注意：RequireJS默认情况下并没有保证myFunctionA和myFunctionB一定是在页面加载完成以后执行的，在有需要保证页面加载以后执行脚本时，RequireJS提供了一个独立的domReady模块，需要去RequireJS官方网站下载这个模块，他并没有包含在RequireJS中。

案例二：页面加载后执行JavaScript

 <script src="./js/require.js"></script> 
     <script> 
    require(["domReady!", "./js/a.js", "./js/b.js"], function() { 
             myFunctionA(); 
             myFunctionB(); 
        }); 
 </script>

案例三：RequireJS插入的

<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="js/a.js" src="js/a.js"></script>

使用RequireJS来定义JavaScript模块

这里的JS模块与传统的JS代码不同处在于它无须访问全局的变量。模块化的设计使得JS代码在需要访问“全局变量”的时候，都可以通过依赖关系，把这些“全局变量”做为参数传递到模块的实现体里，在实现中就避免了访问或者声明全局的变量或函数，有效的避免大量而复杂的命名空间管理。
定义JS模块是通过define方法来实现的。

案例四：student模块，student.js

define(function(){
    return {
        createStudent: function(name, gender){
            return {
                name: name,
                gender: gender
            }
        }
    }
})

通过定义一个 student 模块和一个 class 模块，在主程序中实现创建 student 对象并将 student 对象放到 class 中去。

案例五：class模块，class.js

defint(function(){
    var allStudents = [];
    return {
        classID: "001",
        department: "wy",
        addToClass: function(student){
            allStudents.push(student);
        },
        getClassSize: function(){
            return allStudents.length;
        }
    }
})

案例六：主程序

require(["js/student","js/class"], function(student,clz){
    clz.addToClass(student.createStudent("Jack","male"));
    clz.addToClass(student.createStudent("Xiao","female"));
    console.log(clz.getClassSize());
})

案例七：依赖student的class模块的manager模块，manager.js

define(["js/student","js/class"], function(student, clz){
    return {
        addNewStudent: function(name,gender){
            clz.addToClass(student.createStudent(name.gender));
        }
        getMyClassSize: function(){
            return clz.getClassSize();
        }
    }
})

案例八：新的主程序

require(["js/manager"],function(manager){
    manager.addNewStudent("xiao", "女");
    manager.addNewStudent("ming","男");
    console.log(manager.getMyClassSize());
})

配置RequireJS

引入：

模块名字怎么来的？当require一个模块时，这个模块是如何映射到具体的JS文件上去的？这就涉及到配置RequireJS

案例九：载入 require.js

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

配置 RequireJS

<script type="text/javascript" src="./js/require.js"></script>
<script type="text/javascript">
    require.config({
        baseUrl: "./js",
        paths: {
            "some": "some/v1"
        },
        waitSeconds: 10
    });
    require(["some/module","my/module","./js/a.js"], function(someModule, myModule){});
</script>

baseUrl 指明的是所有模块的baseURL
以.js 结尾的文件加载时不会使用该baseUrl，它们仍会使用当前index.html 所在的相对路径来加载。
如果baseUrl 没有指定，那么会使用data-main中指定的路径。
paths 中定义的路径是用于替换模块中的路径。
waitSeconds 指定最多花多久的等待时间来加载一个JavaScript文件，用户不指定的情况下默认为7秒
packages 指定其他符合CommonJS AMD规范的目录结构，由此带来了丰富的扩展性。如Dojo jQuery 等的模块也可以通过该配置来让RequireJS加载。

综合运用 RequireJS

当RequireJS与其他框架一起工作的时候，它是可以作为统一的加载器来加载其他框架。

RequireJS模块化加载