0

我正在构建一个复杂的网络应用程序，为了简单起见，我在各种文件中制作了各种模块（对象）。某些页面可能需要这些模块，而其他页面则不需要。

出于这个原因，我想避免为任何页面加载所有模块，从而增加无用请求的数量。

到目前为止，我是这样工作的：

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

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

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

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

“在此页面上，您加载这些模块，并使用这些 #id 和 .classes 实例化它们”

和

“在此其他页面上，您仅使用此#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 的方式：/

4

2 回答 2

2

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

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

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

像这样配置构建配置文件的“模块：”属性：

...
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，仅此而已。

我将放置另一个问题的链接，以便此答案获得一些上下文：如何在多页项目中使用 RequireJS 构建配置文件 + r.js

于 2012-08-01T12:34:49.037 回答
0

RequireJS 的创建者实际上做了一个使用页面特定主文件的示例项目：https ://github.com/requirejs/example-multipage

于 2013-07-26T08:31:43.693 回答