RequireJS 实战指南：模块加载、定义与优化

引入 RequireJS 与基础配置

在使用 RequireJS 之前，需要从官方仓库下载核心库文件 require.js。为了启动应用，通常需要在 HTML 文档的 <head> 或主体底部引入该脚本。关键操作是使用 data-main 属性指定应用的入口文件（例如 main.js）。

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

上述代码中，data-main="main" 指示 RequireJS 自动加载 main.js 文件（无需手动添加 .js 后缀）。在进入 main.js 的逻辑之前，需要进行必要的初始化配置，包括设置 baseUrl 基路径以及映射各模块的具体路径，这对于后续正确加载第三方库至关重要。

使用 Require 函数加载依赖

RequireJS 的核心 API 之一是 require() 函数，用于在主文件中导入脚本和处理依赖。最典型的场景是加载 jQuery。

require(["jquery"], function($) {
 $('#mydiv').html('Hello this is RequireJS talking');
});

工作原理：

1. require 函数接收一个字符串数组作为第一个参数，数组中的元素代表模块 ID（在此例中为 "jquery"）。
2. 第二个参数是一个回调函数，当所有指定依赖加载完成后执行。
3. 回调函数的参数按顺序对应数组中的模块返回值。这里 $ 即为 jQuery 对象。

默认情况下，RequireJS 会寻找当前目录下的同名文件。若需使用 CDN 或自定义路径（如 Google CDN 上的 jQuery），需在 main.js 中使用 require.config() 进行路径映射：

require.config({
 paths: {
  "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min"
 }
});

注意：在 paths 配置中，可以省略文件的 .js 后缀，RequireJS 会自动补充。

使用 Define 函数定义标准模块

遵循 AMD 规范的模块定义使用 define() 函数。这使代码结构清晰，便于复用和维护。

第1步：定义无依赖模块

若模块不依赖其他 JS 文件，可直接定义内部逻辑：

define(function () {
 function add(x, y) {
  return x + y;
 }
 // 暴露接口
 return { add: add };
});

第2步：定义有依赖模块

若模块需要依赖外部库（如 jQuery），则必须在前面的数组中声明依赖：

define(['jquery'], function ($) {
 function place(mydiv) {
  $(mydiv).html('My Sample Text');
 }
 return { place: place };
});

关键点： 必须在依赖数组列表中指明 'jquery'，并在回调函数参数列表中以相同顺序传入 $。这样确保了在执行你的业务逻辑前，jQuery 已经准备就绪。

性能优化：构建与合并

虽然模块化提升了代码的可读性，但在生产环境中，几十个独立的 JS 文件会导致大量的 HTTP 请求，拖慢页面加载速度。RequireJS 提供了专门的构建工具 r.js 来解决这个问题。

1. 收集文件： 根据 main.js 中定义的入口点，扫描所有的依赖项。
2. 合并： 将所有相关的 JS 文件内容串联合并。
3. 压缩： 利用 UglifyJS 等工具对合并后的代码进行压缩和混淆，减小体积。

通过这一步骤，原本分散的模块被打包成一个或多个高性能的发布文件，既保留了模块化的开发优势，又消除了网络请求的性能瓶颈。

总结

RequireJS 通过标准化的 AMD 模式，彻底改变了前端 JavaScript 的开发方式。掌握 require() 的依赖注入、define() 的模块封装以及构建工具的优化流程，能够显著提升项目的可维护性和运行效率。 以上就是使用 RequireJS 优化 JavaScript 引用代码的详细内容，更多关于 RequireJS 教程及前端模块化的资料请关注本站其它相关文章！