文章目录

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 规范，一个完整的定义如下

//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. 此处依赖的两个模块 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/