JS模块化工具requirejs

    上一篇文章记录的是AMD和CMD模块化标准。requireJS就基于AMD。下面看看requireJS的基本知识。


    RequireJs出现的原因

    随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作、模块复用、单元测试等等一系列复杂的需求。比如:

    1
    2
    3
    4
    5
    6
    7
    <script type="text/javascript" src="a.js"></script>
    <script type="text/javascript" src="b.js"></script>
    <script type="text/javascript" src="c.js"></script>
    <script type="text/javascript" src="d.js"></script>
    <script type="text/javascript" src="e.js"></script>
    <script type="text/javascript" src="f.js"></script>
    .......

    这样做有很大的问题。经常会造成我们说的白页。首先由于浏览器再加载脚本时,默认是阻塞的。即在加载这些js脚本时,会停止网页的渲染。当加载的文件越来越多时,网页失去响应的时间就会越来越长。其次,由于JS之间存在依赖关系(比如使用b.js必须要等需要等待a.js加载完),此时必须严格保证这些脚本的书写(加载)顺序。依赖最大的模块一定要放在后面。这就造成代码的编写和维护非常困难。比如:

    index.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="a.js"></script>
    </head>
    <body>
    <a href="">test</a>
    </body>
    </html>

    a.js

    1
    2
    3
    4
    5
    6
    (function(){
    function fun1(){
    alert("it works");
    }
    fun1();
    })()

    此时在alert(it works)之前浏览器是没有任何东西的如下:
    普通
    此时如果我们利用requireJS异步加载。就不会出现这个问题。alert的同时,dom结构也会被渲染出来。
    requireJS


    RequireJs作用

    基于上面的种种原因,RequireJS就出现了。

    RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K,堪称非常轻量。它还同时可以和其他的框架协同工作,使用RequireJS必将使您的前端代码质量得以提升。

    下面是几种作用:

    实现js文件的异步加载,避免网页失去响应
    管理模块之间的依赖性,便于代码的编写和维护
    声明不同js文件之间的依赖
    可以按需、并行、延时载入js库
    可以让我们的代码以模块化的方式组织
    

    开始使用requireJS

    在html中引入requirejs

    如果直接在网页中这样写:

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

    同样也会可能造成浏览器失去响应,因为加载这个文件。可以:

    使用defer或者async

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

    async属性表明这个文件需要异步加载,避免网页失去响应。IE不支持这个属性,只支持defer,所以把defer也写上。

    将其放在body最下面。最后加载。

    最后写成:

    1
    <script src="js/require.js" data-main="js/config" defer async="true"></script>

    通常使用requirejs的话,我们只需要导入requirejs即可,不需要显式导入其它的js库,因为这个工作会交给requirejs来做。

    属性 data-main 是告诉requirejs:你下载完以后,马上去载入真正的入口文件。它一般用来对requirejs进行配置,并且载入真正的程序模块,这里我们是在js文件夹下又创建了config.js。


    基本API

    require会定义三个变量:define,require,requirejs,其中require === requirejs,一般使用require更简短

    define 从名字就可以看出这个api是用来定义一个模块
    require 加载依赖模块,并执行加载完后的回调函数
    

    主模块的写法

    先来回忆下AMD的写法:

    1
    2
    3
    4
    // config.js
    require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
    // some code here
    });

    require()函数接受两个参数。第一个参数是一个数组,表示所依赖的模块,上例就是[‘moduleA’, ‘moduleB’, ‘moduleC’],即主模块依赖这三个模块;第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。

    require()异步加载moduleA,moduleB和moduleC,浏览器不会失去响应;它指定的回调函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题。–ranyifeng

    假定主模块依赖jquery、underscore和backbone这三个模块,config.js就可以这样写:

    1
    2
    3
    require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
    // some code here
    });

    require.js假定这三个模块与config.js在同一个目录,文件名分别为jquery.js,underscore.js和backbone.js,然后自动加载。
    require.js会先加载jQuery、underscore和backbone,然后再运行回调函数。主模块的代码就写在回调函数中。


    模块的加载

    一般config.js(入口的文件)的作用主要有两个:

    1. 配置requirejs 比如项目中用到哪些模块,文件路径是什么
    2. 载入程序主模块

    使用require.config()方法,我们可以对模块的加载行为进行自定义。require.config()就写在主模块(config.js)的头部。参数就是一个对象,这个对象的paths属性指定各个模块的加载路径。

    1
    2
    3
    4
    5
    6
    7
    require.config({
    paths:{
    "jquery":"jquery.min",
    "underscore":"underscore.min"
    "backbone":"backbone.min"
    }
    })

    下面这样写path是由于这些js文件都和config.js是同级目录,如果不是同级目录,比如下面这些文件都在lib/下,那么对应下面的paths中要指明/lib/jquery.min或者使用baseUrl: "js/lib"

    之前的例子中加载模块都是本地js,但是大部分情况下网页需要加载的JS可能来自本地服务器、其他网站或CDN,这样就不能通过这种方式来加载了,我们以加载一个jquery库为例:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    require.config({
    paths : {
    "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"],
    "a" : "js/a"
    }
    })
    require(["jquery","a"],function($){
    $(function(){
    alert("load finished");
    })
    })

    通过paths的配置会使我们的模块名字更精炼,paths还有一个重要的功能,就是可以配置多个路径,如果远程cdn库没有加载成功,可以加载本地的库,如:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    require.config({
    paths : {
    "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
    "a" : "js/a"
    }
    })
    require(["jquery","a"],function($){
    $(function(){
    alert("load finished");
    })
    })

    这也是为什么是以数组的形式出现的原因。这样配置后,当百度的jquery没有加载成功后,会加载本地js目录下的jquery。


    AMD模块的写法

    上面介绍了主模块的写法,以及主模块是如何加载模块的,下面来看些是如何编写这些AMD模块的。
    比如我们刚刚写的a.js是这样写的。通过define函数定义了一个模块,然后再页面中使用:

    1
    2
    3
    4
    5
    6
    7
    define(function(){
    function fun1(){
    alert("it works");
    }
    fun1();
    })

    再例如一个math.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    define(function(){
    var add = function(x,y){
    return x+y;
    }
    var sub = function(x,y){
    return x-y;
    }
    return {
    add:add,
    sub:sub
    }
    })

    config.js主模块中加载方法如下:

    1
    2
    3
    4
    5
    6
    require(["math"],function(math){
    return math.add(2,3);
    })
    require(["a"],function(){
    alert("load finished");
    })

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

    1
    2
    3
    4
    5
    6
    7
    8
    define(['mylib'],function(){
    function foo(){
    return mylib.getInfo();
    }
    return {
    foo:foo
    }
    })

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


    加载非规范的模块

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

    比如定义一个hello.js的模块:

    1
    2
    3
    function hello(){
    alert("hello");
    }

    它就按最普通的方式定义了一个函数,我们能在requirejs里使用它吗?它并不是一个AMD规范的模块,因为并没有通过define定义。假如我们还是先前的方法把它当作一个普通的模块。在config.js利用path定义路径。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    require.config({
    paths:{
    "hello":"hello",
    }
    })
    require(["hello"],function(){
    alert("test hello");
    })

    此时会报错:
    Uncaught TypeError: undefined is not a function

    原因是最后调用 hello() 的时候,这个 hello 是个 undefined . 这说明,虽然我们依赖了一个js库(它会被载入),但requirejs无法从中拿到代表它的对象注入进来供我们使用。

    在这种情况下,我们要使用 shim ,将某个依赖中的某个全局变量暴露给requirejs,当作这个模块本身的引用。
    这样的模块在用require()加载之前,要先用require.config()方法,定义它们的一些特征。

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    require.config({
        shim: {
          'underscore':{
            exports: '_'
          },
          'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
          }
        }
      });

    require.config()接受一个配置对象,这个对象除了有前面说过的paths属性之外,还有一个shim属性,专门用来配置不兼容的模块。具体来说,每个模块要定义(1)exports值(输出的变量名),表明这个模块外部调用时的名称;

    其中deps数组,表明该模块的依赖性。比如,jQuery的插件(这里是滚动插件)可以这样定义:

    1
    2
    3
    4
    5
    6
    shim: {
        'jquery.scroll': {
          deps: ['jquery'],
          exports: 'jQuery.fn.scroll'
        }
      }


    require.js插件

    require.js还提供一系列插件,实现一些特定的功能。
    domready插件,可以让回调函数在页面DOM结构加载完成后再运行。

    1
    2
    3
    require(['domready!'], function (doc){
      // called once the DOM is ready
    });

    再比如jquery.form插件(插件形式的非AMD模块,我们经常会用到jquery插件,而且这些插件基本都不符合AMD规范,比如jquery.form插件,这时候就需要将form插件”垫”到jquery中)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    require.config({
    shim: {
    "underscore" : {
    exports : "_";
    },
    "jquery.form" : ["jquery"]
    }
    })
    require(["jquery", "jquery.form"], function($){
    $(function(){
    $("#form").ajaxSubmit({...});
    })
    })


    总结

    大致知道了requireJS是什么东西,以及基本的如何使用。希望以后能够多多用于项目。要不估计过不久又忘记了。
    感谢和推荐阮一峰的文章此文档