JavaScript模块化编程（3）：require.js的用法

声明：本文摘抄自阮一峰的博客，这位大神给我了很大的帮助，本文是为了加深自己对JavaScript理解而写的。

前言：

　　本章主要介绍 require.js的实际用法。

一：为什么要使用 require.js ?

　　最早的时候，所有的Javascript代码都写在一个文件里，只要加载一个文件就可以了，后来代码越来越多，一个文件不够了，必须要分成多个文件，依次加载。下面网页代码，相信很多人都见过。

　   <script src="2.js"></script>
　　<script src="3.js"></script>
　　<script src="4.js"></script>
　　<script src="5.js"></script>
　　<script src="6.js"></script>

　　这段代码依次加载多个 js 文件。

　　这样写法有很大的缺点：1，加载的时候，浏览器会停止网页的渲染，加载文件越多，网页失去响应的实际就越长；2，由于js文件之间存在着依赖关系，因此必须保证js的加载顺序（比如上例中 1.js 要在 2.js 上面），依赖性最大的模块一定要放到最后加载，当依赖关系复杂的时候，代码编写和维护就变得异常困难。

　　而require.js的诞生就是为了解决上面两个缺点的。

二，require.js的加载

　　使用 require.js的第一步，先去官网下载最新版本。

　　下载后，假定把它放到 js 子目录下，就可以加载了。

<script src="js/require.js"></script>

　　有人可能问了，如果加载这个文件，也可能造成网页假死，怎么办？

　　解决办法有两个：第一，把它放到网页底部加载，一般head会放入页面的css，body是网页的主题，body下面是js。第二中方法这样写：

<script src="js/require.js" defer async="true"></script>

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

　　加载requires.js以后，下步就是加载我们自己的代码了。假定我们有自己代码文件是main.js，也放到 js 目录下，那么只需要下面这样写：

<script type="text/javascript" src="js/require_2.1.14.js" data-main="js/main"></script>

　　data-main属性的作用是，指定网页程序的主模块。在上例子中，就是js目录下的main.js，这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js,所有可以把main.js简写成main。

三：主模块的写法

　　上节的main.js，我们把它称为“主模块”，意思是整个网页的入口代码。它有点像是C语言的main()函数，所有代码都从这儿开始运行。

　　下面看怎么写这个main.js。

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

// main.js

alert("加载成功");

　　但是这样的话，就没必要使用require.js了，真正常见的情况是，主模块依赖于其他模块，这时候就要用AMD规范定义的 requrie()函数。

//main.js
require(['m1','m2','m3'],function(m1,m2,m3){
       
    //code ...

})

　requires()函数接受两个参数：第一个参数是数组类型，表示所依赖的模块有哪些。上例中['m1','m2','m3']就是主模块依赖的三个模块，至于这三个模块的加载排序，最好是按照三个模块之间的依赖关系排序。第二个参数是一个回调函数。表示当前模块都加完毕要执行的函数。加载模块会以参数的方式传递进入主模块函数，从而在回调函数中就可以用这些模块。

　　下面我们看一个实际的例子：

　　假定主模块依赖于 jquery,underscore和backbone这三个模块，main.js可以这样写：

//AMD
require(['Jquery','underscore','backbone'],function($,_,Backbone){
    //code ...
})

　　require.js会先加载JQuery.underscore和backbone，然后再运行回调函数。主模块代码就写这里。

四，模块的加载

　　在上面的例子中，主模块的依赖模块是["jquery","underscore","backbone"]。默认情况下，require.js 假定这个三模块是在于main.js同一个目录的，文件名分别是jquery.js，underscore.js和backbone.js，然后加载。

　　使用require.config()方法，我们可以对模块的加载行为进行自定义。require.cofig()就写在主模块头部。　

　　参数是一个对象，这个对象的paths属性指定各个模块的加载路径。

require.config({
    paths:{
        "Jquery":"jquery.min",
        "underscore":"underscore.min",
        "backbone":"backbone.min"
    }
});

　　以上代码给出了三个模块的文件名，路径默认与main.js 同一个目录（js子目录）。如果这些模块在其他目录，比如 js / lib 目录。则有两种写法：

　　第一种，逐一指定路径

require.config({
    paths:{
        "Jquery":"lib/jquery.min",
        "underscore":"lib/underscore.min",
        "backbone":"lib/backbone.min"
    }
});

　　另一种则是直接改变基目录（baseUrl）

require.config({
    baseUrl:"js/lib", 
    paths:{
        "Jquery":"jquery.min",
        "underscore":"underscore.min",
        "backbone":"backbone.min"
    }
});

　　如果在另外一台主机上，也可以直接指定它的网址，比如：

require.config({ 
    paths:{
        "zepto":"http://www.360weboy.com/handbook/zepto/index.html"
    }
});

　　require.js要求，每个模块是一个单独的.js文件，这样的话，如果加载多个模块，就会发出多次HTTP请求，会影响网页加载速度。因此，require.js提供了一个优化工具，当模块部署完毕之后，可以用这个工具将多个模块合并在一个文件中，减少HTTP请求。

五，AMD模块的写法

　　require.js加载的模块，采用AMD规范，也就是说，模块必须按照 AMD的规范来写。

　　具体的说，就是模块必须采用特定的 define() 函数来定义。如果一个模块不依赖其它模块，那么可以直接定义在 define函数之中。

　　假定现在又一个 math.js文件，它定义了 math 模块，那么，math.js就要这样写：

//math.js

define(function(){

    var add = function(x,y){
        return x + y;
    };

    return {
        add:add
    };
})

　　加载方法如下：

// main.js

require(['math'],function(math){
   alert(math.add(2,3)); 
})

　　如果这个模块（math）还依赖其它模块，那么 define()函数的第一个参数，必须是数据，指明该模块的依赖性。

//math.js

define(['myLib'],function(myLib){

    var add = function(x,y){
        return x + y;
    };

    function foo(){
        myLib.doSomething();
    }

    return {
        add:add,
        foo:foo
    };
})

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

六，加载非规范的模块

　　理论上，require.js加载的模块，必须是按照AMD规范，用define()函数来定义的模块。但是实际上，虽然已有一部分流行的函数库（比如Jquery）符合AMD规范，更多的库并不符合。那么，require.js是否能加载非规范的模块呢？

　　答案是可以的。

　　这样的模块在用require()加载之前，要先用 require.config()方法来定义它们的一些特征。

　　举例来说，underscore 和 backbone这两个库，都没有采用AMD规范来写。如果要加载它们的话，必须先定义它们的特征。

require.config({
    baseUrl:"js/lib", 
    paths:{
        "Jquery":"jquery.min",
        "underscore":"underscore.min",
        "backbone":"backbone.min",
        "math":"math"
    },
    shim:{
        'underscore':{
            exprots:'_'
        },
        'backbone':{
            deps:['underscore','jquery'],
            exprots:'Backbone'
        }
    }
});

　　require.config()接受一个配置对象，这个对象除了前面说过的paths属性外，还有是一个 shim 属性，专门来配置不兼容的模块。具体来说，

每个模块要定义（1）exports属性（输出的变量名），表明这个模块外部调用时的名称。（2）deps数组，表明该模块的依赖性。

　　比如，Jquery的插件可以这样定义：

shim{
  'jquery.scorll':{
     deps:['jquery'],
     exprots:'jquery.fn.scroll'  
   }
}

七，require.js插件

　　require.js还提供一些插件，实现一些特定的功能。

　　1，domeready插件，可以让回调函数在页面DOM结构加载完毕后再运行。

require(['domeready!'],function(doc){
   //code... 
})

　　2，text和Image插件，则允许require.js加载文本和图片文件。

define([
        'text!review.txt',
         'image!cat.jpg' 
     ],
     
     function(review,cat){
           console.log(review);
           document.body.appendChild(cat);
      }
     )

　　类似的插件还有JSON和mdown，用于加载 json文件和markdown文件。

posted @ 2014-08-11 23:01 jienyi 阅读(251) 评论(0) 编辑收藏举报

刷新页面返回顶部

纸鸢