Require.js的基本用法详解

一:什么是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时，文件编写方式如下：

rush:js;">

在b.js文件中

rush:js;"> $(function(){ $("#div1").css("background-color","blue"); })

为了使b.js中的代码生效，必须要把这行代码放到后面，这样在使用的框架和js文件较多的时候，它们的导入顺序就会变得很麻烦。

require.js的诞生就是为了解决上面所说的两个问题：

1.实现js文件的异步加载，避免网页失去响应；

2.管理模块之间的依赖性，便于代码的编写和维护。

三：require.js的加载

①：首先，我们要去官网下载最新的版本，官方网址：nofollow" href="http://requirejs.org/docs/download.html">http://requirejs.org/docs/download.html

　　下载完成后，将它放在网站项目的js子文件夹下就可以使用了：

rush:js;">

其中：async属性和defer属性表明这个文件需要异步加载，避免网页失去响应。IE只支持defer属性，而不支持async属性。

2.将文件放到网页底部加载。

②：加载完require.js之后，我们就可以加载自己的代码了，假设我们自己的js文件命名为main.js，同样放于js文件夹下，那么,只需要执行如下代码：

rush:js;">

就可以使每一个页面都使用这个配置，然后页面中就可以直接使用require来加载所有的短模块名。

六：AMD模块的写法

require.js加载的模块，采用AMD规范，也就是说，模块必须按照AMD的规定来写。具体来说，就是模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块，那么可以直接定义在define()函数之中。假定现在有一个math.js文件，它定义了一个math模块。那么，math.js就要这样写：

rush:js;"> define(function (){ 　　　　var add = function (x,y){ 　　　　　　return x+y; 　　　　}; 　　　　return { 　　　　　　add: add 　　　　}; 　　});

然后在页面中：

rush:js;"> require(['math'],function (math){ 　　alert(math.add(1,1)); });

如果这个js文件还依赖其他模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。

rush:js;"> define(['jquery'],function($){ $("#div1").css("background-color","red"); }) 　

当require()函数加载上面这个模块的时候，就会先加载jquery.js文件。

七：第三方模块

通过require加载的模块一般都需要符合AMD规范即使用define来申明模块，但是部分时候需要加载非AMD规范的js，这时候就需要用到另一个功能：shim：

1. 非AMD模块输出，将非标准的AMD模块变成可用的模块，例如：在老版本的jquery中，是没有继承AMD规范的，所以不能直接require["jquery"],这时候就需要shim

rush:js;"> require.config({ shim: { "jquery" : {exports : "$"} } })

这样配置后，我们就可以在其他模块中引用jquery模块：

rush:js;"> require(["jquery"],function(_){ $("#div1").css("background-color","red"); })

2.插件形式的非AMD模块，我们经常会用到jquery插件，而且这些插件基本都不符合AMD规范，比如jquery.form插件，这时候就需要将form插件加入到jquery中：

rush:js;"> require.config({ shim: { "jquery.form" : { deps : ["jquery"] } } }) require.config(["jquery","jquery.form"],function($){ $(function(){ $("#form").ajaxSubmit({...}); }) })

以上就是require的基本用法详解。希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程之家网站的支持！