RequireJS和AMD规范

Bertha 。 2022-03-12 17:12 167阅读 0赞

### 1、概述 ###

RequireJS是一个工具库，主要用于客户端的模块管理。它可以让客户端的代码分成一个个模块，实现异步或动态加载，从而提高代码的性能和可维护性。它的模块管理遵守AMD规范（Asynchronous Module Definition）。

RequireJS的基本思想是，通过define方法，将代码定义为模块；通过require方法，实现代码的模块加载。

首先，将require.js嵌入网页，然后就能在网页中进行模块化编程了。

**上面代码的data-main属性不可省略**，用于指定主代码所在的脚本文件，在上例中为scripts子目录下的main.js文件。用户自定义的代码就放在这个main.js文件中。

##### define方法：定义模块 #####

define方法用于定义模块，RequireJS要求每个模块放在一个单独的文件里。

按照是否依赖其他模块，可以分成两种情况讨论。第一种情况是定义独立模块，即所定义的模块不依赖其他模块；第二种情况是定义非独立模块，即所定义的模块依赖于其他模块。

（1）独立模块

如果被定义的模块是一个独立模块，不需要依赖任何其他模块，可以直接用define方法生成。

define({ 
        method1: function() { },
        method2: function() { },
    });

上面代码生成了一个拥有method1、method2两个方法的模块。

（2）非独立模块

如果被定义的模块需要依赖其他模块，则define方法必须采用下面的格式。

define(['module1', 'module2'], function(m1, m2) { 
       ...
    });

define方法的第一个参数是一个数组，它的成员是当前模块所依赖的模块。比如，\[‘module1’, ‘module2’\]表示我们定义的这个新模块依赖于module1模块和module2模块，只有先加载这两个模块，新模块才能正常运行。一般情况下，module1模块和module2模块指的是，当前目录下的module1.js文件和module2.js文件，等同于写成\[’./module1’, ‘./module2’\]。

define方法的第二个参数是一个函数，当前面数组的所有成员加载成功后，它将被调用。它的参数与数组的成员一一对应，比如function(m1, m2)就表示，这个函数的第一个参数m1对应module1模块，第二个参数m2对应module2模块。这个函数必须返回一个对象，供其他模块调用。

**需要注意的是，回调函数必须返回一个对象，这个对象就是你定义的模块。**

如果依赖的模块很多，建议写成如下形式：

define(
        function (require) { 
            var dep1 = require('dep1'),
                dep2 = require('dep2'),
                dep3 = require('dep3'),
                dep4 = require('dep4'),
                dep5 = require('dep5'),
                dep6 = require('dep6'),
                dep7 = require('dep7'),
                dep8 = require('dep8');
    
                ...
        }
    
    });

##### require方法：调用模块 #####

require方法用于调用模块。它的参数与define方法类似。

require(['foo', 'bar'], function ( foo, bar ) { 
            foo.doSomething();
    });

上面方法表示加载foo和bar两个模块，当这两个模块都加载成功后，执行一个回调函数。该回调函数就用来完成具体的任务。

require方法的第一个参数，是一个表示依赖关系的数组。

require方法也可以用在define方法内部。

define(function (require) { 
       var otherModule = require('otherModule');
    });

下面的例子显示了如何动态加载模块。

define(function ( require ) { 
        var isReady = false, foobar;
     
        require(['foo', 'bar'], function (foo, bar) { 
            isReady = true;
            foobar = foo() + bar();
        });
     
        return { 
            isReady: isReady,
            foobar: foobar
        };
    });

##### AMD模式小结 #####

define和require这两个定义模块、调用模块的方法，合称为AMD模式。它的模块定义的方法非常清晰，不会污染全局环境，能够清楚地显示依赖关系。

AMD模式可以用于浏览器环境，并且允许非同步加载模块，也可以根据需要动态加载模块。

### 2、配置require.js：config方法 ###

require方法本身也是一个对象，它带有一个config方法，用来配置require.js运行参数。config方法接受一个对象作为参数。

require.config({ 
        paths: { 
            jquery: [
                '//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js',
                'lib/jquery'
            ]
        }
    });

config方法的参数对象有以下主要成员：

（1）paths

paths参数指定各个模块的位置。这个位置可以是同一个服务器上的相对位置，也可以是外部网址。可以为每个模块定义多个位置，如果第一个位置加载失败，则加载第二个位置，上面的示例就表示如果CDN加载失败，则加载服务器上的备用脚本。需要注意的是，指定本地文件路径时，可以省略文件最后的js后缀名。

require(["jquery"], function($) { 
        // ...
    });

上面代码加载jquery模块，因为jquery的路径已经在paths参数中定义了，所以就会到事先设定的位置下载。

（2）baseUrl

baseUrl参数指定本地模块位置的基准目录，即本地模块的路径是相对于哪个目录的。该属性通常由require.js加载时的data-main属性指定。

（3）shim

有些库不是AMD兼容的，这时就需要指定shim属性的值。shim可以理解成“垫片”，用来帮助require.js加载非AMD规范的库。

require.config({ 
        paths: { 
            "backbone": "vendor/backbone",
            "underscore": "vendor/underscore"
        },
        shim: { 
            "backbone": { 
                deps: [ "underscore" ],
                exports: "Backbone"
            },
            "underscore": { 
                exports: "_"
            }
        }
    });

上面代码中的backbone和underscore就是非AMD规范的库。shim指定它们的依赖关系（backbone依赖于underscore），以及输出符号（backbone为“Backbone”，underscore为“\_”）。

> 本文来源于：[http://javascript.ruanyifeng.com/tool/requirejs.html][http_javascript.ruanyifeng.com_tool_requirejs.html]  
> 这里只做记录！

[http_javascript.ruanyifeng.com_tool_requirejs.html]: http://javascript.ruanyifeng.com/tool/requirejs.html