一个已经落日西山，但又不得不了解的库 【模块require.js】

需求

最近一直在维护公司的老项目，看到前辈们的代码，有点怀疑自己的前端水平了，十多年前的代码，不禁让人感叹，能够运行十年甚至二十年的代码，应该可以算的上是古董了，不经有点膜拜之意。不敢下手，就连最基本的阅读感觉都快有点障碍了，吓得赶快恶补了一番。简单介绍一个，这是一个前后端没有分离的项目，前端采用JSP开发页面，代码里面包括了：AngularJS 1.0.0 的框架， RequireJS 2.0.0 等等，想看懂代码逻辑，不得不再补补。

1， RequireJS 模块加载器

AMD是RequireJS 的异步模块定义规范，AMD异步模块加载思想中有一个非常重要的思想就是注入依赖，让多个JS文件在define()函数中以数组元素的形式进行注入，然后在回调函数中被使用。这种思想，在早期的前端MVC时代，包括现在都是经典。

异步加载模块化JS 又称：AMD，它主要解决了两个问题：
1, 需要将文件模块化，实现JS文件的异步加载
2，需要文件依赖关系，管理模块之间的依赖，编译维护
require.js:是一个异步模块加载： AMD

2， 基本API使用

require.js 定义了三个变量： define, require, requirejs. 其中require === requirejs, 一般使用require更简短

define: 从名字就可以看出这个api是用来定义一个模块
requrie: 获取，加载依赖模块，并执行加载完成后的回调函数

requrie() 函数接受两个参数，第一个参数是一个数组，表示依赖的模块
          第二个参数是回调函数，指当前面的模块加载成功之后，它将被执行，加载的模块会以参数的形式传入该函数

定义个 index.js

define(function() {
    function test() {
        console.log('index模块')
    }
    test()
})

通过define函数定义了一个模块，然后再页面中使用

require(['a'])
注意： reuire中的依赖是一个数组，即使只有一个依赖，你也必须使用数组来定义， require API中的第二个参数是回调函数callback,  这个回调函数是用来处理加载完毕后的逻辑
require(['js/a']， function() {
      console.log('我是加载完模块a之后，需要执行的逻辑， load finished')
})

3， 加载文件

如何加载一个非本地的js库

require.config({
   paths:{
        'jquery': ['https://cdn.bootcss.com/jquery/1.10.2/jquery']
   }
})

requrie(['jquery'], function($) {
    $(function() {
        console.log('load finished')
    })
})

注意事项： 加载一个第三方的远程服务器或者网站，cdn上的JS库， require.config会自动帮我们在地址后面拼接.js, 所以，加载的类库地址不要带.js.

4，require.js内置插件

1, 页面DOM解构加载完之后再运行

require(['domready!'], function() {
    console.log('DOM加载完成')
})

5，总结

学完这些，感觉已经够用了，继续阅读十年前的古董代码，这必将是一段不平凡的旅程，希望有所收获。