JS 模块化 - 03 AMD 规范与 Require JS

1 AMD 规范介绍

AMD 规范，全称 Asynchronous Module Definition，异步模块定义，模块之间的依赖可以被异步加载。

AMD 规范由 Common JS 规范演进而来，前文介绍 Common JS 规范时说过，浏览器端无法直接使用 Common JS，需要使用 browserify 编译后才能运行。而 AMD 规范规范则专注于浏览器端。

1.1 定义模块

AMD 规范定义模块使用 define 函数，函数声明如下：

define(id?, dependencies?, factory)

参数含义：

- id：非必填，模块的名字。如果没有传该参数，模块的名字默认为模块加载器请求的指定脚本的名字
- dependencies：非必填，数组，定义的这个模块所需要依赖的模块的数组。如果定义的这个模块不依赖于其他模块，则不需要传递该参数。
- factory：必填，工厂方法。如果为对象，则表示这个模块输出的值；如果为函数，则是这个模块要干的事。

如果传递了 dependencies，dependencies 中依赖的每项模块会在当前模块的 factory 之前执行。

1.2 加载模块

与 Common JS 规范类似，加载模块使用 require 函数，但 AMD 规范中该函数有两个参数，语法格式如下：

require([module], callback)

参数含义：

- module：数组，要加载的模块数组。
- callback：模块加载成功之后要干的事。

2 Require JS

require.js 是符合 AMD 规范的 JS 库，使用 require.js 可以实现 AMD 规范，进行模块的定义和加载。

2.1 使用准备

首先下载 require.js 文件。require.js 可以从 github 下载。（不知道是不是网络原因，官网我打不开）

在项目中创建 lib 目录，将 require.js 文件复制到 lib 目录中。

2.2 初始化目录

在 lib 同级目录创建目录 modules，在 modules 目录中分别创建 module1.js 和 module2.js 代表两个模块。

同时下载 moment.js 文件，将其复制到 lib 目录中。

在 lib 同级目录创建入口 HTML 和 JS 文件，名字分别为：index.html 和 index.js.

此时目录结构为：

|- 03_AMD/
	|- lib/
		|- require.js
		|- moment.js
	|- modules/
		|- module1.js
		|- module2.js
	|- index.html
	|- index.js

在 index.html 文件中通过 script 标签引入 require.js 文件，同时指定 data-main 属性：

<script src="./lib/require.js" data-main="./index.js"></script>

data-main 属性指定了在加载完 require.js 属性后，执行的入口文件，该文件也称为 主模块 。咱们的主模块为 index.html 同级路径下的 index.js 。

2.3 路径配置

在入口 JS 文件 index.js 中对模块进行配置：

requirejs.config({
  baseUrl: './',
  paths: {
    m1: './modules/module1',
    m2: './modules/module2',
    moment: './lib/moment'
  },
  shim: {
    moment: {
      exports: 'moment'
    },
  }
})

1. baseUrl 属性：指定了基本路径，后面模块路径配置都是相对于这个基本路径。
2. paths 属性：配置各个模块的名称及对应文件路径（省略 .js 后缀）。上面分别给 module1.js、module2.js、moment.js 三个模块命名为 m1， m2， moment。名字可以取其他名字，但路径要正确。
3. shim 属性：当使用其他不符合 AMD 规范的模块时，可以使用该属性导出模块。（这里选择的 moment.js 是兼容 AMD 规范的库，无须配置到 shim 属性中，此处仅为了简单演示）

2.4 定义模块

前面创建了两个自定义模块，现在分别编写这两个模块。

module1.js 中定义一个简单的加法运算：

define(function () {
  console.log('in module1.')

  function sum(num1, num2) {
    console.log('module1 sum function.', num1, num2)
    return num1 + num2
  }

  return {
    sum
  }
})

module2.js 定义一个 calculate 函数，在该函数中需要调用 moment.js 中的格式化函数、 module1.js 中的 sum 函数，也就是说该模块（m2）依赖于 moment 模块 和 m1 模块：

define(['m1', 'moment'], function (m1, moment) {

  console.log('in module2.')

  function calculate (n1, n2) {
    console.log('begin calc: ', moment().format('YYYY MMM Do h:mm:ss a'))
    return m1.sum(n1, n2)
  }

  return {
    calculate
  }
})

2.5 使用模块

前面在主模块 index.js 中定义了模块的路径，现在继续在该文件中通过 require 函数使用其他模块：

// ...

require(['m2'], function (m2) {
  const result = m2.calculate(10, 20)
  console.log(result)
})

主模块中加载 m2 模块（module2.js），并调用 m2 模块中的 calculate 函数。

2.6 运行

在浏览器中运行 index.html，浏览器控制台输出如下：

主模块（index.js）依赖于 m2 模块（module2.js），m2 模块又依赖于 m1 模块（module1.js），故 require.js 会首先加载 module1.js，输出 in module1.，然后加载 module2.js， 输出 in module2.。

m1、m2、moment 三个模块都加载完毕后，才会执行主模块中的 factory 工厂函数。

3 总结

AMD 规范的使用：

• 定义模块：define 函数
• 加载模块：require 函数

感谢你阅读本文，如果本文给了你一点点帮助或者启发，还请三连支持一下，点赞、关注、收藏，作者会持续与大家分享更多干货