什么是requirejs

要说requirejs就要先说一下AMD。
AMD是”Asynchronous Module Definition”的缩写，意思就是”异步模块定义”。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。
我们要介绍的require.js就是AMD规范实现的一个库。

requirejs的作用

require.js可以很好的解决两个问题

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

如何使用requirejs

鉴于requirejs官网文档实在太烂，我就直接说一下具体使用流程

1. 首先，在index.html的script中引入我们的require.js的依赖，以及main来异步加载main.js(由于require.js默认的文件后缀名是js，所以可以把main.js简写成main)

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

2. main.js可以看作是整个html的JS管理入口，之后我们所有的依赖都在main.js里来控制处理。
   main.js基本内容分两部分

   1. require.config()主要来布置一些外来引入的依赖，用固定的path定义，
   2. require([url],callback)来引入我们自己定义的依赖，可以有多个：

require.config({
    paths: {
        jquery: 'jquery.min'
    }
});

requirejs(['./hello'],function(x){
  document.body.append(x.person.name)
  console.log(2)
  }

3. 用define()来定义被引入的依赖,如hello.js.而在define()内部，我们可以继续引用其他依赖，如frank.js；

define(['./frank'],function(frank){
  console.log(1)
  return {
    person:frank
  }
})

4.定义frank.js为一个数据文件：

define({
      name: "Hello,Frank",
      age: 18
});

5.为了看出执行的先后顺序，在每一层函数里加入了console.log(1),console.log(2).可以看出执行顺序是先hello.js后main.js：

6.这样就可以实现一个RequireJS模块化管理的基本模型，例子中的main.js定义了一个固定路径的jquery依赖和自己定义的hello.js模块，又在hello.js内引入frank.js的数据，最后成功拿到frank的数据，输出在页面里。
当我们打开index.html，可以看到

Hello,Frank