require.js简要概述及require.js的使用方法

本文章部分内容引用自http://ourjs.com/detail/52ad26ff127c76320300001f，感谢该文章的作者阮一峰

一、为什么要使用require.js？

为了解释该问题，我们来看一下，如果不使用require.js，会如何。

在前端设计中，我们通常需要编写大量js代码，并且在加载网页的过程中依次对js文件进行加载。以下这段代码，其功能为依次加载多个js文件：

<script src="1.js"></script>
<script src="2.js"></script>
<script src="3.js"></script>
<script src="4.js"></script>
<script src="5.js"></script>
<script src="6.js"></script>

那么问题来了，首先，加载js文件的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长。其次，我们所编写的js模块通常会有一定的关联性，有着各种依赖关系，而若仅通过上述代码，依次决定模块加载的次序，很容易人为出现错误，这种代码编写方法会使代码的维护和编写会很困难。

require.js的功能，便是解决这两大问题。

首先，通过require.js，可以实现js文件的异步加载，避免网页失去响应；

其次，通过require.js，可以有效对模块间的依赖性进行管理。

二、如何使用require.js

首先去require.js官网去下载最新版本的require.js，然后将所下载的require.js文件拷贝到网页所在项目中

在html中编写代码<script src="js/require.js"></script>即可实现对require.js的加载。其中“js/require.js”为require.js的路径。

现在我们实现了对require.js的加载，但仅仅加载require.js是不够的，我们之所以使用require.js，很多时候是因为有大量具有依赖关系的js模块需要加载。那么如何通过require.js加载其他模块？

首先假定我们所编写的js模块只有一个主模块main.js，对该模块加载，加载代码只需将加载require.js的代码稍微修改即可：

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

如果main.js模块不依赖任何模块，如main.js代码如下：

alert("加载成功！");

则网页即可直接弹出“加载成功”这一提示。但我们既然使用了require.js，就一定是因为有多个相互依赖的模块需要加载，上述情况几乎不可能。那么当主模块依赖于其他模块时，main.js中代码的编写就需要使用AMD规范定义的的require()函数。

require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
　　　　// some code here
　　});

假设主模块依赖于query、underscore和backbone，三个模块，则main.js中的代码为：

require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){

　　　　// some code here

　　});

require()函数需要输入两个参数，第一个参数为一个数组，说明require()函数所在模块依赖于哪些模块，第二个参数为一个回调函数，当第一个参数所指定的模块加载完毕后，则调用第二个参数的回调函数。注意，以上数组中的参数，只是模块外部调用的名称（若所加载模块代码使用define()函数定义，则模块名即外部调用名），而这些模块的具体路径，则需要我们对其指定。若不对路径进行指定，则默认所依赖模块与main.js在同一个目录，并且文件名为"调用名.js"。路径的指定方法为：在main.js中使用require.config（）函数。将该函数写在main.js文件的头部。config()函数的参数为一个对象，对象的path属性用来指定路径。如：

require.config({
　　　　paths: {
　　　　　　"jquery": "lib/jquery.min",
　　　　　　"underscore": "lib/underscore.min",
　　　　　　"backbone": "lib/backbone.min"
　　　　}
　　});

对于require.js所加载的除主模块外的所有模块的编写，需要按照AMD规定的define()函数来定义。

假设现在主模块要求加载math.js模块，那么该模块的代码如下：

define(['myLib'], function(myLib){
　　　　function foo(){
　　　　　　myLib.doSomething();
　　　　}
　　　　return {
　　　　　　foo : foo
　　　　};
　　});

其中['myLib']参数为math.js模块加载前需要加载的模块名，即加载math.js模块前，需要加载myLib模块。若math.js模块没有所依赖的模块，则define（）函数只有一个参数function.

而主模块加载该模块的代码为：

require(['math'], function (math){
　　　　alert(math.add(1,1));
　　});

以上即为本人所总结的require.js的功能及基本使用方法