AMD规范之require.js

写在前面

AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。目前，主要有两个Javascript库实现了AMD规范：require.js 和 curl.js。这里介绍 require.js。既然是模块，就涉及到两个通用的问题：1. 模块如何定义。2. 模块如何加载。

定义模块

在 require.js 中，定义一个模块的方式为：

define(callback)
// or
define([...modules], callback)

可以看出，在引入了 require.js 之后，全局提供了一个 define 函数，用于模块的定义。当 define 函数只接收到一个参数时，该参数为该模块的回调函数，在模块被加载时调用，函数的返回值即作为该模块的导出值。当 define 函数接收到两个参数时，第一个参数为该模块的依赖数组，第二个函数为该模块的回调函数，函数的参数依次为依赖数组的每一项。函数的返回值为该模块的导出值。

由模块定义的方式可以看出，define 函数并未提供定义模块名字的位置，那怎么唯一定义这个模块的名字呢？引用这个模块时的名字是什么呢？答案是文件名。

require.js要求，每个模块是一个单独的js文件。

加载模块

在 require.js 中，加载一个模块的方式为:

require([...modules], callback)

require 函数的第一个参数为要加载的模块，第二个函数为回调函数，在前面的模块加载完成后会调用回调函数，并将加载的模块的返回值依次传递给回调函数。

示例

下面以在浏览器项目中引用 require.js 为例展示其用法。项目结构如下：

1⃣️ 浏览器中引入 require.js

需要用 data-main 属性指明 require.js 的入文件，即主程序。

// index.html



    
    
    
    


    

2⃣️ 定义 a 模块和 b 模块

// a.js
define(function() {
    return {
        sayHi: function() {
            console.log('我是 A 模块！');
        }
    }
})

// b.js
define(['a'], function(a) {
    return {
        sayHi: function() {
            console.log('我是 B 模块！');
            a.sayHi()
        }
    }
})

3⃣️ 定义主模块，main.js

模块名即为文件名，当文件名不加后缀js的时候，文件路径默认与main.js在同一个目录。当文件名加后缀js的时候，文件路径默认为项目根目录。（这种现象为实践得到）

// main.js
require(['a', 'b'], function(a, b) {
    a.sayHi()
    b.sayHi()
})

在浏览器运行如下：