前端模块化：AMD规范

Posted 2020-10-16 灰锅

1 概述

AMD(Asynchronous Module Definition)，也就是异步模块定义。AMD规范，制定了定义模块的规则，使得模块之间的依赖可以被异步加载。这和浏览器的异步加载模块的环境刚好适应（浏览器同步加载模块会导致性能、可用性、调试和跨域访问等问题）。

所谓异步，就是所有的模块将被异步加载，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。这就是浏览器端模块加载器核心所在。

AMD规范由CommonJs规范演进而来，大部分思想跟CommonJS类似，属于Modules/Async流派。但AMD规范是专注于浏览器端的，根据浏览器特点做了自己的一些定义实现。下面我们来了解一下AMD规范。

 

2 define方法：定义模块

AMD规范定义了一个自由变量或者说是全局变量 define 的函数，其作用是用来定义并暴露一个模块，函数代码如下：

define(id?, dependencies?, factory);

 

l  第一个参数，id（名字），是个字符串。它指的是定义中模块的名字，这个参数是可选的。如果没有提供该参数，模块的名字应该默认为模块加载器请求的指定脚本的名字。如果提供了该参数，模块名必须是“顶级”的和绝对的（不允许相对名字）。

l  第二个参数，dependencies（依赖），是个定义中模块所依赖模块的数组。依赖模块必须根据模块的工厂方法优先级执行，并且执行的结果应该按照依赖数组中的位置顺序以参数的形式传入（定义中模块的）工厂方法中。

l  第三个参数，factory（工厂方法），为模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值。

 

2.1  define.amd 属性

为了清晰的标识全局函数（为浏览器加载script必须的）遵从AMD编程接口，任何全局函数应该有一个"amd"的属性，它的值为一个对象。这样可以防止与现有的定义了define函数但不遵从AMD编程接口的代码相冲突。

判断是否存在define.amd属性，可判断当前的文件加载是否遵循AMD规范。目前我们大部分的主流的前端库都做了AMD兼容，判断是否存在define.amd属性，然后执行对应的加载模式。例如jQuery最后几行的写法如下：

if ( typeof define === "function" && define.amd ) {

    define( "jquery", [], function () { return jQuery; } );

}

 

2 require方法：加载模块

require方法用于调用模块，但是不同于CommonJS，它有两个参数，与define方法类似。结构代码如下：

require([module], callback);

第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功之后的回调函数。如果将前面的代码改写成AMD形式，就是下面这样：

require([‘a‘], function (a) {

　　　　a.FuncA();

　　});

上面方法表示加载a模块，当这个模块加载成功后，执行一个回调函数。该回调函数就用来完成具体的任务。a.FuncA()与a模块加载不是同步的，因此在浏览器下不会发生阻塞的情况。

 

3  AMD实例

3.1 普通模块

define("a", ["require", "exports", "b"], function (require, exports, b) {

       exports.funb = function() {

           return b.funb();

           //Or:

           return require("b").funb();

       }

   });

上面例子，创建一个名为"a"的模块，使用了require，exports，和名为"b"的模块。第三个参数是回调函数，可以直接使用依赖的模块，他们按依赖声明顺序作为参数提供给回调函数。

 

3.2 匿名模块

define(["a"], function (a) {

       return {

         funb: function(){

           return a.funb();

         }

       };

   });

上面的例子中，我们忽略了define 方法的第一个参数，这样就定义了一个匿名模块，而模块文件的文件名就是模块标识。例如，上面定义的这个模块文件放在b.js中，那么b就是它的模块名。如果其他模块想引用这个模块的话，可以在依赖项中用"b"来加载这个匿名模块。

 

3.3 独立模块

define({

     funA: function(a, b){

       return a + b;

     }

   }); 

如果被定义的模块是一个独立模块，不需要依赖任何其他模块，可以直接用define方法生成。上面的例子中，定义了一个拥有funA方法的模块。

 

3.4   非独立模块

define(function (require, exports, module) {

     var a = require(‘a‘),

         b = require(‘b‘);
 

     exports.fun = function () {

             a.funA();

             b.funB();

         };

   });

上面例子中，定义的模块返回一个对象，该对象的fun方法就是外部调用的接口。这种方法与 CommonJS 方式定义有些类似。需要注意的是，回调函数必须返回一个对象，这个对象就是你定义的模块。

 

下一篇我们开始介绍AMD规范的产物RequireJs加载器，进一步了解AMD规范的具体实现。