文章目录
  1. 1. AMD 简介
  2. 2. AMD 规范的 API
    1. 2.1. define()
    2. 2.2. require()
  3. 3. 小结
  4. 4. 参考

本系列博客更像是读blog读文档的笔记,从诸多资料中梳理出了自己的认识。

JS 的模块化编程(一)- 模块的基本写法
JS 的模块化编程(二)- CommonJS
JS 的模块化编程(三)- AMD
JS 的模块化编程(四)- CMD
JS 的模块化编程(五)- AMD 和 CMD 的区别
JS 的模块化编程(六)- requireJS

AMD 简介

AMD,Asynchronous Module Definition,异步模块定义

  1. 异步加载模块,模块的加载不影响它后面语句的执行
  2. 所有依赖这个模块的语句,都定义在回调里

它的诞生背景如之前介绍 CommonJS 时所说的,是为了解决浏览器中模块的加载只能异步不能同步的问题。

AMD 规范的 API

define()

define() 全局函数,用来定义模块
define(id?, dependencies?, factory);

  • id: string 模块的标识,命名规范
  • dependencies: 数组,成员是它依赖的模块id
  • factory: 回调函数,它的参数是所有依赖模块返回的引用,它的返回值便是该模块的导出值-即对外提供的接⼝

假设我们定义一个 myMath 模块。它依赖两个模块,分别是 jQuery 和 math( math 同之前系列中介绍的一样)。按照 AMD 规范,一个完整的定义如下

1
2
3
4
5
6
7
8
9
10
11
12
13
//myMath.js
define('myMath', ['jquery','math'], function($,math){
//使用 jquery
//使用 math
math.max = function(a,b){
return a>b?a:b;
};
//返回
return {
math: math,
other: other //这是其他的接口
};
});

require()

require() 全局函数,用来加载模块。但是不同于 CommonJS,它要求两个参数:
require([module]?, callback);

  • [module]: 数组,成员是它要加载的模块
  • callback: 加载成功后的回调

把前面的 app.js 的代码改成 AMD 形式的,就是这样:

1
2
3
4
5
6
7
8
//1. 此处依赖的两个模块 jquery 和 myMath 的加载是异步的,不会阻塞浏览器
require(['jquery', 'myMath'], function($, myMath){
//2. 这里的脚本,是在依赖都加载完成后,被回调执行的
var val1 = $('#person1').val(),
val2 = $('#person2').val();
$('#sum').val( math.add(val1, val2) );
$('#max').val( math.max(val1, val2) );
});

小结

AMD 规范,重点要求了两件事:

  1. 模块的加载,是异步的。保证不会阻塞到浏览器
  2. 通过回调,来管理依赖与被依赖

最后,通过比较,来从形式上感受下 AMD 规范。
左侧是原生JS的模块写法(模块的定义和模块的使用),右侧是通过AMD包装后的模块写法(模块的定义和模块的使用)。

参考

https://github.com/amdjs/amdjs-api/wiki/AMD
http://www.feeldesignstudio.com/2013/09/javascript-module-pattern-amd/

文章目录
  1. 1. AMD 简介
  2. 2. AMD 规范的 API
    1. 2.1. define()
    2. 2.2. require()
  3. 3. 小结
  4. 4. 参考