JavaScript模块化：AMD

AMD的基本语法

AMD的概念

AMD（Asynchronous Module Definition）：异步模块定义。AMD专门用于浏览器端，模块的加载是异步的。

AMD规范：是 RequireJS 在推广过程中对模块化定义的规范化产出。

RequireJS：一个基于AMD规范实现的模块化开发解决方案。

暴露模块的方式

定义没有依赖的模块：（参数只有一个 function）

  1. define(function () {
  3.     return 模块
  5. })

定义有依赖的模块：（参数有两个：模块名、function）

  1. //定义有依赖的模块：第一个参数为数组
  2. define(['module1', 'module2'], function (m1, m2) {
  4.     return 模块
  6. })

代码解释：

  • 第一个参数必须是数组，里面存放的是，需要依赖的其他的模块。

  • 第二个参数是function，里面带了形参 m1 和 m2，分别代表了 module1 和 module2。这个形参的作用是，前面依赖的模块一旦声明了，就可以一一对应地注入到 function中去，从而在 function 内部使用依赖的模块。这种方式称之为显式声明依赖注入。

引入模块的方式

在主模块中引入其他的模块：

  1. //在主模块中引入其他的模块
  2. require(['module1', 'module2'], function (m1, m2) {
  4.     使用m1 / m2
  6. })

RequireJS：是AMD的实现

RequireJS的使用举例（自定义模块）

1、创建项目结构

在工程文件中新建如下目录：

  1. js
  2.   | libs
  4.   | modules
  5.         | alerter.js
  6.         | dataService.js
  7.   | main.js
  9. index.html

所有的代码写完之后，项目结构如下：

JavaScript模块化：AMD - 图1

2、下载require.js，并导入

在官网下载require.js文件：

JavaScript模块化：AMD - 图2

然后将require.js文件拷贝到项目的js/libs/目录中。

这样的话，就导入成功了。

3、自定义模块

（1）dataService.js：

  1. //定义没有依赖的模块
  2. define(function () {
  3.     let name = '我是 dataService.js中的内容';
  4.     function getName() {
  5.         return name;
  6.     }
  8.     //暴露模块
  9.     return { getName };
  10. });

这模块没有依赖。

（2）alerter.js：

  1. //定义有依赖的模块
  2. define(['myDataService'], function (dataService) {
  3.     let msg = '我是 aleter.js中的内容';
  4.     function showMsg() {
  5.         console.log(dataService.getName());  //调用了 myDataService 模块中的内容
  6.         console.log(msg);
  7.     }
  9.     //暴露模块
  10.     return { showMsg };
  12. });

这个模块，依赖了myDataService这个模块，模块名是我自己起的。稍后，我们会在main.js中做映射，将myDataService这个名字和dataService.js文件关联起来。

（3）main.js：

这个是主模块。

  1. requirejs.config({
  2.     //baseUrl: 'js/',     //基本路径
  3.     paths: {    //配置路径
  4.         myDataService: './modules/dataService',
  5.         myAlerter: './modules/alerter'
  6.     }
  7. });
  9. requirejs(['myAlerter'], function (alerter) {
  10.     alerter.showMsg();
  11. })();

这个模块，依赖了myAlerter这个模块，模块名是我自己起的。并且，我们在文件的上方做了映射，将myAlerter这个名字和alerter.js文件关联了起来。

我们来讲一下最上方的几行代码（即requirejs.config里的内容）的意思：

  • 我们可以看到，文件（3）依赖了文件（2），文件（2）依赖了文件（1）。

  • paths里做的就是映射：将键myDataService和文件dataService.js进行关联，将键myAlerter和文件alerter.js进行关联。

另外，再讲一下注释里的baseUrl的用法：如果没有这个注释，那么paths里的路径，是从当前这个文件（main.js）的角度出发的；如果加了一行baseUrl，表明它是 paths 里所有路径的最开头的部分，baseUrl的路径是从项目的根目录的角度出发的。

（4）index.html：

这个是入口文件。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <!-- 先通过 src 引入 require.js 文件，然后通过 data-main 引入主模块（main.js） -->
  11.     <script data-main="js/main.js" src="js/libs/require.js"></script>
  12. </body>
  13. </html>

注意，上面的代码中，我们直接通过src属性引入requre.js文件，一旦这个文件发挥作用了，会去找data-main属性里的指向，它正好指向的是主模块。

有了上面这种引入的方式，我们就不用再老土地引入多个<script>标签了。

运行 index.html，打印结果如下：

JavaScript模块化：AMD - 图3

项目源码：2018-04-11-RequireJSDemo