How to load a specific code regarding the current page?

Question

I'm building a complex web app and to keep things simple, I made various modules (objects) in various files. Those modules can be required on some page, and not on others.

For that reason, I'd like to avoid loading all the modules for any pages, increasing the amount of useless requests.

So far, I work like this :

1. I include all needed libraries
2. After that, I instantiate these librairies in jQuery(function() {}); with specifics #ids or .classes arguments for that current page

Everything works fine, but since my app is growing beyond easy, I'd like to manage my JS with RequireJS.

And that's where things start to be a little confusing for me.

I know I can load my module when required, using require(['module1', 'module2', 'etc'], function (module1, module2, etc) {}), but how can I say :

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

and

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

?

module1 will, for example, load data from the api, and list them to a specific table given as parameter :

// 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();

That means, depending on the page, I'll have to load my modules differently. That's how I don't know how to do using RequireJs :/

Answer 1

What you need is a javascript file for each page. That file will be responsible to execute your page-specific code.

I'll assume that you will use r.js to optmize and pack your code.

We can interpret Module1, Module2 etc. as libraries, because they will be used on multiple pages. To avoid browser do one request for each library module you can include this modules on your optimized main file:

Configure the "modules:" attribute of your build profile like this:

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

By doing this you tell to requirejs something like this: Optimize my "main.js" file and include in it all its dependencies, also includes the "module1", "module2" etc. You have to do this because on your main file you do not include these modules on the require()/define() call, but you still want they available in case the page-specific module needs them. You don't have to do this for every library module you have, just for those that will be used by most of your pages.

Then, you create a javascript file for your page to use those modules:

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

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

   //other page specific-code.
});

And then on the html file:

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

So, when page loads, it will make a request for require.js, then another for main.js and then another for home.js and that's all.

I'll put the link for the another question so this answer get some context: How to use RequireJS build profile + r.js in a multi-page project

Answer 2

The creator of RequireJS actually made an example project that uses page-specific main files: https://github.com/requirejs/example-multipage