Javascript 如何加载有关当前页面的特定代码？

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

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

到目前为止，我的工作方式如下：

我包括所有需要的图书馆

之后，我在

jQuery（function（）{}）中实例化这些库带有当前页面的特定ID或.classes参数

一切都很好，但由于我的应用程序正在超越easy，我想用RequireJS管理我的JS

这就是我开始有点困惑的地方

我知道我可以在需要时使用

require（['module1'，'module2'，'etc']，function（module1，module2，etc）{}）

加载模块，但我怎么说：

“在此页面上，加载这些模块，并使用这些#ID和.class对其进行实例化”

及

“在此另一页上，您仅加载具有此#其他id的模块”

?

例如，模块1将从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();

//在第1页
var mod1=新模块1（$（“#内容>表格”）；
mod1.init（）；//将从api加载url位于的数据
//在第2页
var mod1=new Module1（$（'#content.items>table'）；//要填充数据的表不在同一位置！
mod1.init（）；

---

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

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

我假设您将使用r.js来选择并打包代码

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

如下所示配置构建配置文件的“模块：”属性：

...
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的创建者实际上做了一个使用页面特定主文件的示例项目：

@Cyril N。我不确定我是否理解你想要什么。你能提供一个你希望RequireJS为你做什么的示例吗？因为模块1本身是负责的要使用#id和.class等实例化库，这些库也将是模块。我回答了一个关于requirejs和多页应用程序的问题，可能会有帮助：@devundef您添加

数据开始

属性的想法非常有趣，我相信也会解决我的问题！谢谢：）（我更新了关于您的第一条评论@devundef的问题）这样做很有趣，我会尝试！谢谢！：）开始时有点混乱，但之后会更好：）我更新了关于另一个问题的答案，并提供了关于每页优化的更多信息，请看。