RequireJS 入门：AMD 模块加载与配置详解

RequireJS 简介

简介

RequireJS 是目前 JavaScript 开发中最常用的库之一。在我参与的项目中，无论是直接使用还是推荐引入，RequireJS 都扮演了重要角色。本文将阐述 RequireJS 的核心概念及其基础应用场景。

AMD 模块定义规范

讨论 RequireJS 时，必须首先理解 JavaScript 模块的概念以及 AMD（异步模块定义）规范的含义。

JavaScript 模块是指遵循单一职责原则（SRP）的代码片段，并对外暴露公共 API。在现代 JavaScript 开发中，每个模块通常封装特定功能并对应独立文件。这导致开发者必须密切关注模块间的依赖关系，并按特定顺序加载模块，否则运行时会发生错误。

使用 script 标签加载 JavaScript 模块时，必须先加载被依赖的模块，再加载依赖它们的模块。script 标签默认同步加载，必须严格遵循顺序。虽然可以使用 async 或 defer 属性实现异步加载，但这可能导致加载顺序混乱。另一种方案是将所有脚本打包捆绑，但捆绑时仍需确保正确的加载顺序。

AMD 规范正是为了解决上述问题而设计，它允许模块及其依赖以异步方式加载，同时保证执行顺序的正确性。

CommonJS 是对通用 JavaScript 模式的标准化尝试，其中包含了 AMD 的定义。建议读者在继续阅读前了解相关背景。此外，ECMAScript 6（ES6）规范中已包含关于模块导入导出的标准定义，这些将成为 JavaScript 语言的一部分。这也正是 RequireJS 所倡导的方向。

RequireJS 核心功能

RequireJS 简介

RequireJS 是一个 JavaScript 文件和模块框架，可从 http://requirejs.org/ 下载，或通过 Visual Studio 的 NuGet 获取。它支持浏览器环境以及 Node.js 等服务器环境。使用 RequireJS，你可以按需顺序加载所需的依赖模块。

RequireJS 的核心机制是：当使用 script 标签加载定义的依赖时，它通过 head.appendChild() 函数动态加载这些依赖。依赖加载完成后，RequireJS 会计算模块定义的顺序，并按正确顺序调用。这意味着开发者只需使用“根”模块加载所需功能，其余工作交由 RequireJS 处理。为了正确使用，所有定义的模块必须使用 RequireJS 的 API，否则无法按预期工作。

RequireJS API 存在于 RequireJS 载入时创建的 requirejs 命名空间下。其主要 API 包括以下三个函数：

1. define：用于创建模块。每个模块拥有唯一的模块 ID，用于 RequireJS 运行时。define 是全局函数，无需使用 requirejs 命名空间。
2. require：用于加载依赖。它同样是全局函数，无需使用 requirejs 命名空间。
3. config：用于配置 RequireJS 的行为。

下文将演示如何使用这些函数，首先让我们了解 RequireJS 的加载流程。

data-main 属性配置

data-main 属性

下载 RequireJS 后，首要任务是理解其启动机制。当 RequireJS 被加载时，它会查找 data-main 属性指定的脚本文件（该文件应与加载 RequireJS 本身的文件位于同一目录）。data-main 用于为所有脚本文件设置根路径。基于此根路径，RequireJS 将加载所有相关模块。以下是一个使用 data-main 的示例： <script src="scripts/require.js" data-main="scripts/app.js"></script>

另一种定义根路径的方式是使用配置函数，后续章节将详细介绍。RequireJS 假设所有依赖均为脚本文件，因此在声明脚本依赖时无需添加 .js 后缀。

配置函数详解

配置函数

若要更改 RequireJS 的默认配置，可使用 require.config 函数。该函数接收一个可选的配置对象，包含多种配置选项。以下是可用的主要配置项：

• baseUrl：用于指定加载模块的根路径。
• paths：用于映射不在根路径下的模块路径。
• shims：用于配置未使用 RequireJS 定义的脚本或模块的依赖及初始化函数。例如，若 underscore 未使用 RequireJS 定义但仍需通过 RequireJS 使用，则需在配置中将其定义为 shim。
• deps：指定加载的依赖关系数组。

以下是一个使用配置的示例：

require.config({
  //By default load any module IDs from scripts/app
  baseUrl: 'scripts/app',
  //except, if the module ID starts with "lib"
   paths: {
    lib: '../lib'
  },
  // load backbone as a shim
  shim: {
    'backbone': {
      //The underscore script dependency should be loaded before loading backbone.js
      deps: ['underscore'],
      // use the global 'Backbone' as the module name.
      exports: 'Backbone'
    }
  }
});

在此示例中，根路径设置为 scripts/app。以 lib 开头的模块被配置在 scripts/lib 文件夹下，backbone 则被配置为 shim 依赖。

模块定义与依赖加载

使用 RequireJS 定义模块

模块是封装内部实现、暴露接口并限制作用域的对象。RequireJS 提供 define 函数用于定义模块。按照惯例，每个 JavaScript 文件应仅定义一个模块。define 函数接受一个依赖数组和一个包含模块定义的函数。通常，模块定义函数会按顺序接收依赖数组中的模块作为参数。例如，以下是一个简单的模块定义：

define(["logger"], function(logger) {    
    return {
       firstName: “John",
       lastName: “Black“,
       sayHello: function () {
        logger.log(‘hello');
       }
    }
  }
);

如代码所示，包含 logger 的依赖数组被传递给 define 函数，该模块随后会被调用。定义模块中的 logger 参数将被设置为 logger 模块。每个模块都应返回其 API。此示例中，模块暴露了两个属性（firstName 和 lastName）和一个函数（sayHello）。此后，其他模块通过 ID 引用此模块时，即可使用其暴露的 API。

使用 require 函数

RequireJS 中另一个非常有用的函数是 require。该函数用于加载模块依赖，但不创建新模块。例如，以下代码展示了如何使用 require 定义一个能使用 jQuery 的函数。

require(['jquery'], function ($) {
  //jQuery was loaded and can be used now
});

总结

小结

本文介绍了 RequireJS 库，它是构建每个 JavaScript 项目时常用的工具之一。RequireJS 不仅用于加载模块依赖和相关命令，还帮助开发者编写模块化的 JavaScript 代码，从而显著提升代码的可扩展性和重用性。