AMD规范

JavaScript AMD规范免费看

什么是AMD规范、require()函数、require.js库

06-22侠课岛    基础入门       

前端/前端必修/JavaScript 基础知识梳理 15     0     277

什么是AMD规范

AMD 的全名叫做 Asynchronous Module Definition,意思就 “异步模块定义”。AMD 的特点便是异步加载,模块的加载不会影响其他代码的运行。这就解决了 CommonJS 中必须等模块加载完成这个问题。所有依赖于某个模块的代码,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。

AMD 规范简单到只有一个 API,即 define 函数,语法如下所示:

define([module-name?], [array-of-dependencies?], [module-factory-or-object]);
  • module-name:模块标识,可以省略。
  • array-of-dependencies:所依赖的模块,可以省略。
  • module-factory-or-object:模块的实现,或者一个JavaScript对象。

define 函数中第一个第二个参数都是可以省略的,第三个参数是模块的具体实现本身。

从 AMD 中的A(Asynchronous),我们知道 define 函数的一个性质,即异步性。当 define 函数执行时,它首先会异步的曲调用第二参数中列出的依赖模块,当所有的模块被载入完成之后,如果第三个参数是一个回调函数则执行,然后告诉系统模块可用,也就通知了依赖于自己的模块自己已经可用。

require()函数

AMD 也采用 require() 语句加载模块,但是和 CommonJS 不同的是,它要求两个参数,语法如下所示:

require([module], callback);

第一个参数 [module] ,是一个数组,里面的成员就是要加载的模块。第二个参数 callback ,是加载成功之后的回调函数。

示例:

如果我们要使用 AMD 规范加载模块,可以像下面这样写:

require(['test'], function (test) {
    test.add(1, 2);
});

这样 test 模块和 math.add() 加载是异步的,浏览器不会发生假死。

require.js库

要使用 require.js,需要先去官网下载最新版本,下载后放到项目中,就可以使用了。

例如:

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

加载这个文件,也可能造成网页失去响应,我们可以把它放在网页底部加载,或者像下面这样,加上 async 属性,表示这个文件需要异步加载,避免网页失去响应。

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

加上 defer 是因为 IE 不支持 async 这个属性,只支持 defer。

加载 require.js 以后,如果要加载自己的代码,可以这样写:

<script src="js/require.js" data-main="js/main"></script>

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

require.js 加载的模块,采用 AMD 规范。也就是说,模块必须按照AMD的规定来写。 具体来说,就是模块必须采用特定的 define() 函数来定义。如果一个模块不依赖其他模块,那么可以直接定义在 define() 函数之中。

示例:

假设现在有一个 test.js 文件,这个文件定义了一个 test 模块,我们可以这样写:

define(function(){
    var add = function(a, b){
        return a + b;
    };
    return{
        add:add
    }
});

然后加载这个模块的方式如下:

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

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

define(['test'], function(test){
    function show(){
      test.doSomething();
    }
    return {
      show : show
    };
  });

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

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

15

本课评分:
  •     非常好
难易程度:
  •     适中的

内容目录


本文索引


|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?