Javascript的模块化编程(require.js的用法和功能介绍

本系列的第一部分和第二部分介绍了Javascript模块的原型和理论概念，今天我们将介绍如何在实战中使用它们。我使用一个非常流行的库，require . js

1.为什么要使用require.js？在最早的时候，所有的Javascript代码都写在一个文件中，所以加载这个文件就足够了。后来代码越来越多，一个文件不够用，只好分成几个文件依次加载。相信很多人都看过下面的网页代码。复制了以下代码： Script src=' http 33601 . js '/Script Script src=' http 33602 . js '/Script Script src=' http 33603 . js '/Script Script src=' http 33604 . 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的加载使用require.js的第一步是从官网下载最新版本。下载后假设放在js子目录下，就可以加载了。复制的代码如下： script src=' http 3360 js/require . js '/script。有些人可能认为加载此文件也可能导致网页失去响应。有两种解决方案，一种是在网页底部加载，另一种是按如下方式编写：复制代码如下： scriptrc=' http : js/require . js ' defer async=' true '/script async属性表示这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持延期，所以写延期也一样。加载require.js后，下一步是加载我们自己的代码。假设我们自己的代码文件是main.js，它也放在js目录下。那么只需要编写如下：复制代码如下： script src=' http 3360 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.js复制代码如下： alert('加载成功！'。);但是在这种情况下，就不需要使用require.js了，真正的情况是主模块依赖于其他模块，所以需要使用AMD规范定义的require()函数。//main.js复制代码如下：require (['modulea '，' moduleb '，' modulec']，function (modulea，moduleb，modulec){//这里有些代码})；require()函数接受两个参数。第一个参数是一个数组，它指示它所依赖的模块。上面的例子是['modulea '，' moduleb '，' modulec']，这意味着主模块依赖于这三个模块。第二个参数是回调函数，当上面指定的所有模块都成功加载时，将调用该函数。加载的模块作为参数传递到函数中，这样它们就可以在回调函数中使用。require()异步加载moduleA、moduleB和moduleC，浏览器不会丢失响应。它指定的回调函数只有在前面的模块加载成功后才会运行，从而解决了依赖问题。接下来，我们来看一个实际的例子。假设主模块依赖于jquery、下划线和主干，main.js可以写成：复制的代码如下：Require (['jQuery '，'下划线'，'主干']，function ($，_，主干){//此处部分代码})；require.js首先加载jQuery、下划线和主干，然后运行回调函数。主模块的代码写在回调函数中。四.模块加载在上一节的最后一个示例中，主模块的依赖模块是['jQuery '，'下划线'，'主干']。默认情况下，require.js假设这三个模块与main.js在同一个目录下，文件名为jquery.js、下划线. js和主干. js，然后自动加载它们。使用require.config()方法，我们可以自定义模块的加载行为。require.config()写在主模块(main.js)的头部。参数是一个对象，其path属性指定每个模块的加载路径。复制的代码如下： require . config({ path : { ' jQuery ' 3360 ' jQuery . min '，'下划线' 3360 '下划线. min '，'主干' 3360 '主干. min ' })；上面的代码给出了三个模块的文件名，默认情况下，路径与main.js在同一个目录(js子目录)中。如果这些模块在其他目录中，比如js/lib目录，有两种方法可以编写它们。一种是逐个指定路径。

复制的代码如下： require . config({ Path : { ' jquery ' 3360 ' lib/jquery . min '，'下划线' : ' lib/下划线. min '，'主干' 3360 ' lib/主干. min'})。另一种是直接更改baseUrl。复制的代码如下： require . config({ base URL : ' js/lib '，path : { ' jquery ' 3360 ' jquery . min '，'下划线' 3360 '下划线. min '，'主干' : '主干。如果一个模块在另一个主机上，也可以直接指定它的网址，例如复制代码如下： require . config({ path : { ' jquery ' 3360 ' https://ax.googleapis.com/Ajax/libs/jquery/1.7.2/jquery.min'. require . js要求每个模块都是一个单独的js文件。这种情况下，如果加载多个模块，就会发出多个HTTP请求，影响网页的加载速度。因此，require.js提供了一个优化工具，可以用来在模块部署后将多个模块合并到一个文件中，从而减少HTTP请求的数量。五、AMD模块的编写require.js加载的模块采用AMD规范。换句话说，模块必须按照AMD的规定编写。具体来说，模块必须由特定的define()函数定义。如果一个模块不依赖于其他模块，可以直接在define()函数中定义。现在假设有一个math.js文件，它定义了一个数学模块。那么，math.js应该这样写：//math.js复制代码如下： define(function(){ var add=function(x，y){ return x y；};返回{ add : add }；});加载方法如下：//main.js复制代码如下：Require (['math']，function(math){ alert(math . add(1，1))；});如果这个模块也依赖于其他模块，那么define()函数的第一个参数必须是一个数组，表示这个模块的依赖关系。复制代码如下：define (['mylib']，function(mylib){ function foo(){ mylib . dosome()；}返回{ foo : foo }；});当require()函数加载上述模块时，它将首先加载myLib.js文件。不及物动词加载非标准模块理论上，require.js加载的模块必须是那些根据AMD规范由define()函数定义的模块。但事实上，虽然一些流行的函数库(如jQuery)符合AMD规范，但更多的库不符合。那么，require.js可以加载非标准模块吗？答案是肯定的。在用require()加载这些模块之前，它们的一些特性应该由require.config()方法定义。例如，下划线和主干库都不是根据AMD规范编写的。如果要加载它们，必须先定义它们的特性。复制的代码如下： require . config({ shim : { '下划线' 3360 {导出：' _'}，'主干' : {deps: ['下划线'，' jquery']，导出： '主干')。require.config()接受一个配置对象，该对象不仅具有上面提到的paths属性，还具有shim属性，该属性专门用于配置不兼容的模块。具体来说，每个模块都要定义(1)导出值(输出变量名)，在外部调用时表示这个模块的名称；(2)deps数组，表示模块的依赖关系。比如jQuery的插件可以定义如下：复制代码如下： shim3360 {'jQuery。滚动' 3360 { deps 3360[' jQuery ']，导出3360' jQuery。fn。滚动' }} 7。require.js插件require . js还提供了一系列插件。Domready插件，加载页面的DOM结构后，可以让回调函数运行。复制的代码如下： require(['domready！').]，函数(doc){ //一旦DOM准备好就调用)}；文本和图像插件，它允许require.js加载文本和图片文件。复制的代码如下： define([ 'text！review.txt '，' image！cat.jpg' ]，功能(审查，cat){ console.log(审查)；document . body . appendchild(cat)；} );类似的插件有json和mdown，它们用于加载json文件和markdown文件。(结束)