RequireJs边学边写：(一)初识RequireJs

由于笔者也是初学RequireJS,所以在某些概念上来说，笔者也是拿不准啊，所以主要是在官网以及前辈的一些博客中吸取精华，加上一些自己的理解以及案例的制作，那么下面主要给一些我自学的一些链接吧

• RequireJs中文网

• 阮一峰关于javascript模块化编程的理解

• 另外一些参考

requireJs是一个采用了javascirpt AMD(Asynchronous Module Definition)规范编写的类库，那么要求的就是在采用requireJS分模块加载类库的时候，加载的类库就必须是符合AMD规范的，比如说jquery在1.7版本之后就采用了AMD的规范来编写类库，那么名正言顺的采用requireJs来模块话加载jquery的库文件就不存在什么问题，但是并不是所有的js文件都是符合AMD规范的，那么在requireJS加载之后就不会起到什么作用，当然也可以通过一些其他的方法来加载那么没有使用AMD编写的js库文件，这个在后面的一些文章中将会讲到。

一、什么是AMD

那么既然requireJs使用AMD实现的一个类库，所以我们首先得明白什么是AMD,下面就是我引用的一段话，至于这段话是在哪看到之后然后顺便做成了txt保存下来当时也没有记录。

当你要加载JavaScript模块时，就会使用script标签。为了加载依赖的模块，你就要先加载被依赖的，之后再加载依赖的。 使用script标签时，你需要按照此特定顺序安排它们的加载，而且脚本的加载是同步的。可以使用async和defer关键字使 得加载异步，但可能因此在加载过程中丢失加载的顺序。另一个选择是将所有的脚本捆绑打包在一起，但在捆绑的时候你 仍然需要把它们按照正确的顺序排序。   AMD就是这样一种对模块的定义，使模块和它的依赖可以被异步的加载，但又按照正确的顺序。

就我的理解来说，传统的javascript加载情况下，js文件都是按照前后顺序来加载的，意思就是说只有当第一个js文件加载完成，才能加载第二个js文件，这样的好处是保证了js的文件依赖顺序，但是同时也显露出一个问题，就是如果第一个js文件的加载时间过长，那么势必会造成第二个js文件的加载执行，如果js是在放在dom渲染之前,那么可能出现的结果就是在js未完成加载的情况下，整个页面会出现一片空白的情况。

那么,requireJS是怎么样加载的呢？requireJs采用的是异步的方式进行加载，使得彼此之间的js加载不收影响，代码也不会一直阻塞，同时requireJs提供了回调的机制，使得只有在需求的模块加载完成之后，才会执行相应的代码，那么就在异步的基础上保证了js文件的依赖性。

可以通过如下的一张图清晰的看出requireJS的加载情况：

二、最简单的requireJS入门案例

目录结构如下：

js

|------app

|           |------test1.js

|           |------test2.js

|------lib

|          |------jquery.js

|------app.js

|------require.js

在js目录下有一个app的文件夹，app的文件夹下有两个js文件，lib文件夹下有jquery.js文件,另外在js的一级目录下有app.js入口js文件以及require.js文件，index.html与js是同级目录

① 加载requireJs的库文件(从这里下载)

 
 
<script src="js/require.js" data-main="js/app" defer ascyn="true"></script>

在这里需要注意几点：

1. ReuqireJS以一个相对于baseUrl的地址来加载所有的代码。页面顶层<script>标签含有一个特殊的属性data-main，require.js使用它来启动脚本加载过程，而baseUrl一般设置到与该属性相一致的目录。

   注： baseUrl亦可以通过config设置。如果没有显示指定config及data-main，则默认的baseUrl为包含RequireJs的那个HTML页面。

   从上面就可以看出：那么现在的baseUrl就是js文件夹，如果这里面没有data-main存在的话，那么就是包含了requirejs的html页面，也就是与js同级的index.html所在的目录。

2. RequireJs默认嘉定多有的依赖资源都是js脚本，因此无需再module ID上再加".js"后缀，RequireJs在进行module ID到path的解析时会自动不上后缀。上面的data-main中加载的文件实际上是"js/app.js"。

② app.js中编写相应js代码，就可以直接输出了

app.js

 
 
console.log("hello requireJs");

你会看到在控制台输出了"hello requireJs"，至此一个最简单的requireJS使用案例就到此为止了。

页面加载的顺序就是index.html--->require.js--->app.js，然后是输出。

OK,这一节就介绍这么多，下一节来看看requireJs中的data-main属性以及模块定义。