1.为什么要使用require.js？

在最早的时候，所有的Javascript代码都写在一个文件中，所以加载这个文件就足够了。后来代码越来越多，一个文件不够用，只好分成几个文件依次加载。相信很多人都看过下面的网页代码。

Script src=' http :1 . js '/Script Script src=' http :2 . js '/Script Script src=' http :3 . js '/Script Script src=' http :4 . js '/Script src=' http :5 . js '/Script src=' http 33606 . js '/Script这段代码依次加载几个js文件。

这种写作方式有很大的缺点。首先，加载时，浏览器会停止渲染网页。加载的文件越多，网页失去响应的时间就越长。其次，由于js文件之间存在依赖关系，所以必须严格保证加载顺序(比如前面例子中的1.js应该在2.js前面)，依赖关系最大的模块必须最后加载。当依赖关系复杂时，代码编写和维护将变得困难。

require.js的诞生就是为了解决这两个问题：

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

(2)管理模块之间的依赖关系，方便代码编写和维护。

第二，require.js的负载

使用request . js的第一步是从官网下载最新版本。

下载后假设放在js子目录下，就可以加载了。

script src=' http : js/require . js '/script有些人可能认为加载此文件也可能导致网页失去响应。有两种解决方法，一种是加载在网页底部，另一种是写如下：

script src=' http : js/require . js ' defer async=' true '/script async属性指示需要异步加载此文件，以避免网页丢失响应。IE不支持这个属性，只支持延期，所以写延期也一样。

加载require.js后，下一步是加载我们自己的代码。假设我们自己的代码文件是main.js，它也放在js目录下。然后，只需写下以下内容：

script src=' http : js/require . js ' data-main=' js/main '/script data-main属性用于指定web程序的主模块。在上面的例子中，它是js目录下的main.js，这个文件将首先由require.js加载。由于require.js的默认文件后缀名称是js，因此可以将main.js缩写为main。

第三，主模块的编写。

Main.js在前一节，我称之为‘主模块’，意思是整个网页的入口代码。这有点像C语言中的main()函数，所有代码都在那里开始运行。

让我们看看如何编写main.js

如果我们的代码不依赖于任何其他模块，我们可以直接编写javascript代码。

//main.jsalert('加载成功！'。);

但是在这种情况下，就不需要使用require.js了，真正的情况是主模块依赖于其他模块，所以需要使用AMD规范定义的require()函数。

//main.jsrequire(['moduleA '，' moduleB '，' moduleC']，function (moduleA，moduleB，moduleC){//这里有些代码})；require()函数接受两个参数。第一个参数是一个数组，它指示它所依赖的模块。上面的例子是['modulea '，' moduleb '，' modulec']，这意味着主模块依赖于这三个模块。第二个参数是回调函数，当上面指定的所有模块都成功加载时，将调用该函数。加载的模块作为参数传递到函数中，这样它们就可以在回调函数中使用。

require()异步加载moduleA、moduleB和moduleC，浏览器不会丢失响应。它指定的回调函数只有在前面的模块加载成功后才会运行，从而解决了依赖问题。

接下来，我们来看一个实际的例子。

假设主模块依赖于jquery、下划线和主干，main.js可以编写如下：

需要(['jquery '，'下划线'，'主干']，函数($，_，主干){//这里有些代码})；require.js首先加载jQuery、下划线和主干，然后运行回调函数。主模块的代码写在回调函数中。

四.模块加载。

在上一节的最后一个例子中，主模块的从属模块是['jquery '，'下划线'，'主干']。默认情况下，require.js假设这三个模块与main.js在同一个目录下，文件名为jquery.js、下划线. js和主干. js，然后自动加载它们。

使用require.config()方法，我们可以自定义模块的加载行为。require.config()写在主模块(main.js)的头部。参数是一个对象，其path属性指定每个模块的加载路径。

require . config({ path : { ' jquery ' : ' jquery . min '，'下划线' : '下划线. min '，'主干' : '主干. min ' })；上面的代码给出了三个模块的文件名，默认情况下，路径与main.js在同一个目录(js子目录)中。如果这些模块在其他目录中，比如js/lib目录，有两种方法可以编写它们。一种是逐个指定路径。

require . config({ path : { ' jquery ' : ' lib/jquery . min '，'下划线' : ' lib/下划线. min '，'主干' : ' lib/主干. min ' })；另一种是直接更改baseUrl。

require . config({ baseurl : ' js/lib '，path : { ' jquery ' : ' jquery . min '，'下划线' : '下划线. min '，'主干' : '主干. min ' })；如果模块位于另一台主机上，您也可以直接指定其URL，例如：

require . config({ path s : { ' jquery ' : ' https://Ajax . googleapis.com/Ajax/libs/jquery/1 . 7 . 2/jquery . min ' })；Require.js要求每个模块都是一个单独的js文件。这种情况下，如果加载多个模块，就会发出多个HTTP请求，影响网页的加载速度。因此，require.js提供了一个优化工具，可以用来在模块部署后将多个模块合并到一个文件中，从而减少HTTP请求的数量。

动词（verb的缩写）AMD模块的编写。

require.js加载的模块采用AMD规范。换句话说，模块必须按照AMD的规定编写。

具体来说，模块必须由特定的define()函数定义。如果一个模块不依赖于其他模块，可以直接在define()函数中定义。

现在假设有一个math.js文件，它定义了一个数学模块。然后，math.js会这样写：

//math . jsdefine(function(){ var add=function(x，y){ return x y；};返回{ add : add }；});加载方法如下：

//main.jsrequire(['math']，function(math){ alert(math . add(1，1))；});如果这个模块也依赖于其他模块，那么define()函数的第一个参数必须是一个数组，表示这个模块的依赖关系。

define(['myLib']，function(myLib){ function foo(){ myLib . dosaming()；}返回{ foo : foo }；});当require()函数加载上述模块时，它将首先加载myLib.js文件。

不及物动词加载非标准模块。

理论上，require.js加载的模块必须根据AMD规范由define()函数定义。但事实上，虽然一些流行的函数库(如jQuery)符合AMD规范，但更多的库不符合。那么，require.js可以加载非标准模块吗？答案是肯定的。在用require()加载这些模块之前，它们的一些特性应该由require.config()方法定义。例如，下划线和主干库都不是根据AMD规范编写的。如果要加载它们，必须先定义它们的特性。

require.config({shim: { '下划线' :{exports: '_'}，'主干' : {deps: ['下划线'，' jquery']，exports: '主干' } } })；require.config()接受一个配置对象，该对象不仅具有上面提到的paths属性，还具有shim属性，该属性专门用于配置不兼容的模块。具体来说，每个模块都要定义(1)导出值(输出变量名)，在外部调用时表示这个模块的名称；(2)deps数组，表示模块的依赖关系。

例如，jQuery插件可以定义如下：

shim : { ' jquery . scroll ' : { deps :[' jquery ']，导出3360' jquery.fn.scroll'}} VII。require.js插件。

require.js还提供了一系列插件来实现一些特定的功能。

Domready插件，加载页面的DOM结构后，可以让回调函数运行。

shim : { ' jquery。滚动' : { deps :[' jquery ']，导出s : ' jquery。fn。滚动' } }文本和图像插件，则是允许require.js加载文本和图片文件。

定义(['text！review.txt '，' image！cat.jpg']，功能（审查，cat){console.log(审查);文件。尸体。阑尾(cat)；});类似的插件还有json和mdown，用于加载json文件和减价文件。

以上就是本文的全部所述，希望本文分享对大家有所帮助。