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

我正在构建一个复杂的Web应用程序，为了保持简单，我在各种文件中创建了各种模块（对象）。这些模块可以在某些页面上需要，而不是在其他页面上。如何加载关于当前页面的特定代码？

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

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

我包括所有需要库
在那之后，我举例说明这些librairies在jQuery(function() {});与细节#ids或.classes论点，目前

一切工作正常，但由于我的应用程序越来越容易，我想用RequireJS管理我的JS。

而这正是事情开始有点令我困惑的地方。

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

“这个页面上，你加载这些模块，并与#ids和.classes实例化它们”

和

“这个其他页面上，你只加载该模块，与此＃其他-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();

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

感谢您的帮助！

来源

2012-08-01 Cyril N.

@Cyrilñ不知道我是否明白你想要什么。你能举一个你期望的要求为你做什么的例子吗？因为module1自己会负责用#ids和.classes等来实例化这些库。这些库也是模块。 – devundef 2012-08-01 11:23:10

我回答了有关requirejs和多页面应用程序的问题，可能有帮助：http://stackoverflow.com/questions/11674824/how-to-use-requirejs-build-profile-r-js-in-a-mult- page-project/11730147＃11730147 – devundef 2012-08-01 11:25:15

@devundef添加'data-start'属性的想法非常有趣，同时也解决了我相信的问题！谢谢:) – 2012-08-01 11:57:24

你需要的是每个页面的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，然后使用另一个for home.js，就这些了。

我把链接的另一个问题所以这个答案得到一些背景：How to use RequireJS build profile + r.js in a multi-page project

来源

2012-08-01 12:34:49 devundef

这样做很有趣，我会试试！谢谢！ :) – 2012-08-01 13:01:15

开头有点混乱，但后来好转:)我更新了关于其他问题的答案，并提供了有关每页优化的其他信息，请看一看。 – devundef 2012-08-01 13:04:14

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

来源

2013-07-26 08:31:43 publicJorn

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

回答

相关问题