javascript - 如何加载当前页面的特定代码？

Question

我正在构建一个复杂的网络应用程序，为了简单起见，我在不同的文件中创建了不同的模块(对象)。这些模块可能在某些页面上是必需的，而在其他页面上则不需要。

因此，我希望避免加载任何页面的所有模块，从而增加无用请求的数量。

到目前为止，我的工作方式是这样的:

1. 我包含了所有需要的库
2. 之后，我在 jQuery(function() {}); 中实例化这些库。带有当前页面的具体 #ids 或 .classes 参数

一切正常，但由于我的应用程序变得越来越简单，我想使用 RequireJS 管理我的 JS。

这就是事情开始让我有点困惑的地方。

我知道我可以在需要时使用 require(['module1', 'module2', 'etc'], function (module1, module2, etc) {}) 加载我的模块，但我该怎么说:

"on this page, you load these modules, and instantiate them with those #ids and .classes"

和

"on this other page, you load only that module, with this #other-id"

？

例如，module1 将从 api 加载数据，并将它们列出到作为参数给出的特定表中:

// in page 1
var mod1 = new Module1($('#content>table');
mod1.init(); // will load the data from the api with the url located at <table data-api-url="http://....">

// in page 2
var mod1 = new Module1($('#content .items>table'); // The table where we want the data to be populated is not at the same position!
mod1.init();

这意味着，根据页面的不同，我必须以不同的方式加载我的模块。这就是我不知道如何使用 RequireJs 的原因:/

Answer 1

您需要的是每个页面的 javascript 文件。该文件将负责执行您的页面特定代码。

我假设您将使用 r.js 来优化和打包您的代码。

我们可以将 Module1、Module2 等解释为库，因为它们将在多个页面上使用。为了避免浏览器对每个库模块执行一个请求，您可以将此模块包含在优化的主文件中:

配置构建配置文件的“modules:”属性，如下所示:

...
modules: [
   {
       name: "main" // this is your main file
       includes: [
          "module1",
          "module2",
          "etc..."
       ]
   }
]
...

通过这样做，你告诉 requirejs 类似这样的事情:优化我的“main.js”文件并在其中包含它的所有依赖项，还包括“module1”、“module2”等。您必须这样做，因为在您的主文件中，您没有在 require()/define() 调用中包含这些模块，但您仍然希望它们可用，以防特定于页面的模块需要它们。您不必为您拥有的每个库模块执行此操作，只需为大多数页面将使用的库模块执行此操作即可。

然后，您为页面创建一个 javascript 文件以使用这些模块:

define(function(require, exports, module) {
   var $ = require("jquery"),
       module1 = require("module1");

   var mod1 = new Module1($('#content>table'));
   mod1.init();       

   //other page specific-code.
});

然后在 html 文件上:

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

因此，当页面加载时，它将向 require.js 发出请求，然后向 main.js 发出另一个请求，然后向 home.js 发出另一个请求，仅此而已。

我将放置另一个问题的链接，以便这个答案获得一些上下文:How to use RequireJS build profile + r.js in a multi-page project