JavaScript模块化编程(一)AMD规范(规范使用模块)

JavaScript模块化编程：AMD规范详解与CommonJS对比

本系列第一部分已介绍JavaScript模块的基本写法，本文将重点探讨如何规范地使用模块。

（接上文）

模块化的引入使得代码复用更加便捷，开发者只需按需加载所需的功能模块即可。

然而，这种便利性的前提是所有开发者遵循统一的模块编写标准。若各自为政，代码将陷入混乱。鉴于JavaScript官方尚未出台统一规范，建立行业标准显得尤为迫切。

CommonJS与AMD规范概述

当前主流的JavaScript模块规范主要有两种：CommonJS和AMD。本文将重点介绍AMD，但需先从CommonJS入手进行对比分析。

CommonJS规范与node.js

2009年，Ryan Dahl开发了node.js项目，将JavaScript应用于服务器端编程。

这标志着“JavaScript模块化编程”的正式诞生。在浏览器环境中，模块并非必需，因为网页复杂度有限；但在服务器端，模块是与操作系统及其他应用交互的必要基础，否则无法进行有效编程。

node.js的模块系统基于CommonJS规范实现。在CommonJS中，通过全局方法require()来加载模块。假设存在一个数学模块math.js，加载方式如下。

 
var math = require('math');

 
var math = require('math');
math.add(2,3); // 5

鉴于本系列主要面向浏览器编程，不涉及node.js，故对CommonJS不做深入展开。此处仅需明确require()用于加载模块即可。

浏览器环境下的同步加载局限

服务器端模块的出现，自然催生了对客户端模块的需求，且理想状态下两者应兼容，即同一模块无需修改即可在服务器和浏览器中运行。

然而，CommonJS规范存在一个重大局限，导致其不适用于浏览器环境。观察上一节的代码，在浏览器中运行会引发什么问题？

 
var math = require('math');
math.add(2, 3);

第二行math.add(2, 3)的执行依赖于第一行require('math')的结果，因此必须等待math.js完全加载。若加载耗时较长，整个应用程序将停滞等待。

在服务器端，模块存储于本地硬盘，同步加载可迅速完成，等待时间仅为硬盘读取时间。但在浏览器端，模块位于服务器，加载时间取决于网络速度，可能导致浏览器长时间处于“假死”状态。

AMD异步模块定义机制

因此，浏览器端的模块不能采用“同步加载”（synchronous），而必须采用“异步加载”（asynchronous）。这正是AMD规范诞生的背景。

AMD是“Asynchronous Module Definition”的缩写，意为“异步模块定义”。它采用异步方式加载模块，模块加载过程不会阻塞后续语句的执行。所有依赖该模块的语句均定义在回调函数中，待模块加载完成后，回调函数才会执行。

AMD同样使用require()语句加载模块，但与CommonJS不同，它需要两个参数：

 
require([module], callback);

第一个参数[module]是一个数组，包含待加载的模块；第二个参数callback是加载成功后的回调函数。将前述代码改写为AMD形式如下：

 
require(['math'], function (math) {
math.add(2, 3);
　　}); 

math.add()与math模块的加载不同步，浏览器不会出现假死现象。因此，AMD更适合浏览器环境。

目前，主要有两个JavaScript库实现了AMD规范：require.js和curl.js。本系列第三部分将通过介绍require.js，进一步讲解AMD的用法及模块化编程的实战应用。

（完）