一:什么是require.js
①：require.js是一个js脚本加载器，它遵循AMD(Asynchronous Module Definition)规范，实现js脚本的异步加载，不阻塞页面的渲染和其后的脚本的执行，并提供了在加载完成之后的执行相应回调函数的功能；
②：require.js要求js脚本必须要实现模块化，即文件化；而require.js的作用之一就是加载js模块，也就是js文件。
③：require.js可以管理js模块/文件之间的依赖;即不同的框架例如Jquery，AngularJs等采用了不同的语法，而使用这些语法的js文件在导入时必须排在Jquery.js或Angular.js之后才能顺利执行，require.js则能够解决排序依赖问题。
二:为什么要使用require.js
①：加载的时候，浏览器会停止网页渲染，原因如下：
在不使用require.js时，文件编写方式如下：
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://www.jb51.net/article/a.js"></script> </head> <body> <span>Hellow World</span> </body> </html>
在导入的a.js文件中：
(function(){ function fun1(){ alert("JS文件已生效"); } fun1(); })()
在运行以上代码时我们可以注意到在alert弹出的提示框出现的时候，网页html的部分仍然是空白的，没有显示出任何内容，当我们点击确定之后"Hellow World"才会显示在网页中，这就是JS阻塞浏览器渲染导致的结果。加载文件越多，网页失去响应的时间就会越长。
②：由于js文件之间存在依赖关系，因此必须严格保证加载顺序，依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。例如：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="https://www.jb51.net/js/jquery-1.10.2.js" ></script> <script type="text/javascript" src="https://www.jb51.net/js/b.js" ></script> </head> <body> <div></div> </body> </html>
在b.js文件中
$(function(){ $("#div1").css("background-color","blue"); })
为了使b.js中的代码生效，必须要把<script type="text/javascript" src="https://www.jb51.net/js/b.js" ></script>这行代码放到<script type="text/javascript" src="https://www.jb51.net/js/jquery-1.10.2.js" ></script>后面，这样在使用的框架和js文件较多的时候，它们的导入顺序就会变得很麻烦。
require.js的诞生就是为了解决上面所说的两个问题：
1.实现js文件的异步加载，避免网页失去响应；
2.管理模块之间的依赖性，便于代码的编写和维护。
三：require.js的加载
下载完成后，将它放在网站项目的js子文件夹下就可以使用了：
<script src="https://www.jb51.net/js/require.js"></script>
这里可能会遇到一个问题：加载这个文件，也可能造成网页失去响应，这个问题的解决办法有两种：
1.将这行代码写成如下格式：
<script src="https://www.jb51.net/js/require.js" defer async="true" ></script>
其中：async属性和defer属性表明这个文件需要异步加载，避免网页失去响应。IE只支持defer属性，而不支持async属性。
2.将文件放到网页底部加载。
②：加载完require.js之后，我们就可以加载自己的代码了，假设我们自己的js文件命名为main.js，同样放于js文件夹下，那么,只需要执行如下代码：
<script src="https://www.jb51.net/js/require.js" data-main="js/main"></script>
上述代码中，data-main属性的作用是指定网页程序的主模块。即js目录下面的main.js，这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js，所以可以省略掉".js"简写成main。
四：基本API
在上一部分中，我们引入了main.js文件，main.js的写法：
define(function(){ function fun1(){ alert("main.js已生效"); } fun1(); })
这样，我们就通过define函数定义了一个模块，然后在页面中通过AMD规范定义的的require()函数使用：
require(["js/main"]);
一般情况下，它会依赖于其他的js框架，比如jquery等等，那么，我们这时就要在页面文件中。我们需要按照以下格式来写：
require(['A', 'B', 'C'], function (A, B, C){ // js代码 });
require()函数接受两个参数。第一个参数是一个数组，表示所依赖的框架，上例就是['A', 'B', 'C']，即main.js里的代码需要用到这三个模块；第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块。
require()会异步加载A,B,C三个模块，浏览器不会失去响应；它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。
下面。我们就以jquery为例，说明这个函数是怎样运行的：
require(['jquery'], function ($){ // jquery代码 });