Require.js 使用方法详解：解决JS加载慢与依赖混乱

本文旨在总结 Require.js 的核心使用方法。

使用 Require.js 的必要性

1. 为什么使用 Require.js？

在引入该工具之前，页面的 JavaScript 引用方式如下所示：


<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/jquery.bootstrap.min.js"></script>
<script type="text/javascript" src="/js/plugins/layer/layer.min.js"></script>
<script src="/Scripts/common/zTree/js/jquery.ztree.core.js"></script>
<script src="/Scripts/common/zTree/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="/js/plugins/layer/laydate/laydate.js"></script>
<script type="text/javascript" src="/js/Bootstrap-Select/bootstrap-select.js"></script>

由于这些 JS 代码通常嵌入在模板中，无论页面逻辑是否复杂或是否真正用到所有脚本，浏览器都会强制加载全部 JS 文件。我们知道，JS 加载过程会阻塞页面渲染，直到脚本加载并执行完毕后，页面才会继续渲染，这直接导致页面响应时间显著延长。

此外，开发者难以清晰掌握多个 JS 文件之间的依赖关系。如果随意调整 JS 文件的加载顺序，极易引发运行错误。

Require.js 的核心作用正是为了解决上述两个痛点：

1. 实现 JS 文件的异步加载，从而缩短网页响应时间。

2. 管理 JS 文件之间的依赖关系，提升代码的可维护性。

Require.js 配置与使用详解

2. 具体使用方法讲解

首先移除模板页中的这8个js引用，并在当前页面引入require.js（若缺失可前往官网下载）：


<script src="~/Scripts/common/require.js" data-main="/Scripts/main" data-entry="/Scripts/category/category.js"></script>

其中 `data-main` 属性指定主配置文件，此处配置为网站根目录下的 `Scripts/main.js`，用于进行全局配置。

`data-entry` 是我自定义的扩展属性，专门用于加载当前页面独有的业务 JS 文件。

以下是 `main.js` 的代码实现：


require.config({
  baseUrl: 'http;//www.cdnxxx.com/',
  paths: {
    "jquery": "hplus/js/jquery.min",
    "bootstrap": "hplus/js/bootstrap.min",
　　　　 "bootstrapselect": "/Content/Bootstrap-Select/bootstrap-select",
　　   "laydate": "/Scripts/plugins/laydate/laydate",
    "utility": "/Scripts/utility"
  },
  shim: {
    'bootstrapselect': {
      deps: ['jquery', 'bootstrap']
    },
    'bootstrap': {
      deps: ['jquery']
    },
    'utility': {
      deps: ['jquery'],
      exports: 'Utility'
    },'laydate': {
      exports: 'laydate'
    }
  }
});

require(['jquery'], function ($) {

  var entry = $('[data-entry]').data("entry");
  require([entry]);
});

代码中的 `require.config()` 方法用于配置 JS 路径。`baseUrl` 定义基础目录，`paths` 中配置的路径默认会在前面拼接 `baseUrl` 的值。

`shim` 参数用于配置非 AMD 规范 JS 的依赖项及输出对象。例如，`bootstrapselect` 依赖于 `jquery` 和 `bootstrap`，而 `laydate` 输出的对象为 `laydate`。

当前页面加载的 `category.js` 代码如下：


define(['jquery', 'utility', 'bootstrap', 'bootstrapselect'], function ($, Utility) {

  var category = {
    init: function () {
      this.setOptions();
      this.bindEvent();

      self.getList();
    },
    setOptions: function () {
      this.btnQuery = $("#btnQuery");
      this.divList = $("#divList");
    },
    bindEvent: function () {
      var self = this;
      self.btnQuery.on("click", function () { self.getList(); });
    },
    getList: function () {
      var self = this;

      $.post(self.divList.data("url"), { channelCode: $.trim($("#ddlChannel").val()) }, function (result) {
        self.divList.html(result);
      });
    }
  };

  $(function () {
    category.init();
  });
});

`define` 方法的第一个参数为数组，代表当前页面需要加载的 JS 模块。如上所示，当前页面加载了 `jquery`、`utility`、`bootstrap` 和 `bootstrapselect` 这 4 个 JS 文件。

第二个参数为回调函数。当第一个参数中的 JS 异步加载完成后，该回调函数会被调用。函数参数中的 `$` 对应 `jquery` 返回的对象，`Utility` 对应 `utility` 返回的对象，这两个对象可在回调函数的任意位置使用。

至此，我们已了解 Require.js 的基本用法。在开发其他页面时，可遵循按需加载原则。例如，若某页面仅需 `jquery`，则只需引入 `jquery` 即可：


define(['jquery'], function ($) {
　　// some code
});

路径配置注意事项

3. 注意事项


require.config({
  baseUrl: 'http;//www.cdnxxx.com/',
  paths: {
    "jquery": "hplus/js/jquery.min",
    "bootstrap": "hplus/js/bootstrap.min",
　　　　 "bootstrapselect": "/Content/Bootstrap-Select/bootstrap-select",
　　   "laydate": "/Scripts/plugins/laydate/laydate",
    "utility": "/Scripts/utility"
  }
});

1. 在上述代码中，由于 `bootstrapselect`、`laydate` 和 `utility` 配置的路径以 `/` 开头，属于绝对路径，加载时不会拼接 `baseUrl` 的值；而 `jquery` 和 `bootstrap` 在真正加载时会被拼接 `baseUrl` 的值，最终路径如 `http://www.cdnxxx.com/hplus/js/juqery.min.js`。

2. `paths` 中配置的路径默认会自动追加 `.js` 后缀，因此配置时应省略 `.js`，否则会导致加载错误。

以上关于 Require.js 使用的实例讲解内容到此结束，希望能对大家有所帮助，也希望大家多多支持本站。

Require.js 异步加载与依赖管理实战指南

使用 Require.js 的必要性

Require.js 配置与使用详解

路径配置注意事项

实用工具推荐