AMD 与 CommonJS

在介绍 AMD 之前，我们需要了解 CommonJS 规范。CommonJS 是服务器端 JavaScript（如Node.js）的模块化标准，它使用同步方式加载模块。然而，这种方式并不适用于浏览器环境，因为 JavaScript 文件需要从服务器异步加载。AMD 规范应运而生，AMD 全称 Asynchronous module definition，意为异步的模块定义 ，不同于 CommonJS 规范的同步加载，AMD 正如其名所有模块默认都是异步加载，它允许模块异步加载，不会阻塞浏览器的其他操作。这使得 AMD 规范非常适合浏览器端的 JavaScript 模块化编程。

AMD的核心概念

AMD 规范的核心是 define 和 require 两个函数。

• define

  用于定义模块，它接受一个模块数组和一个工厂函数。

• require

  用于加载模块，它接受一个模块数组和一个回调函数。

AMD 使用

首先我们需要引入 require.js 文件和一个入口文件 main.js 。main.js 中配置require.config()并规定项目中用到的基础模块。

<!-- 网页中引入require.js及main.js -->
<script src="js/require.js" data-main="js/main"></script>

/** main.js 入口文件/主模块 **/
// 首先用 config() 指定各模块路径和引用名
require.config({baseUrl: "js/lib",paths: {"jquery": "jquery.min",  //实际路径为js/lib/jquery.min.js"underscore": "underscore.min",}
});
// 执行基本操作
require(["jquery","underscore"],function($,_){// some code here
});

引用模块的时候，我们将模块名放在[]中作为reqiure()的第一参数；如果我们定义的模块本身也依赖其他模块，那就需要将它们放在[]中作为define()的第一参数。

// 定义math.js模块
define(function () {var basicNum = 0;var add = function (x, y) {return x + y;};return {add: add,basicNum :basicNum};
});// 定义一个依赖underscore.js的模块
define(['underscore'],function(_){var classify = function(list){_.countBy(list,function(num){return num > 30 ? 'old' : 'young';})};return {classify :classify};
})// 引用模块，将模块放在[]内
require(['jquery', 'math'],function($, math){var sum = math.add(10,20);$("#sum").html(sum);
});