Question

I am using RequireJS and I am creating a own script file for each page. However I also have some components that are included into some of the pages (server side). Should these pages also get their own script file, or should the necessary javascript be in the containing page? Some of the functionality for the included pages are common to many pages.

Answer 1

I think you’d be better off thinking about your javascript as reusable modules rather than page-specific functionality. So, say your page has a search box which initiates an AJAX request, a few date pickers, and a whole bunch of tabs. Each of these should be a module (or if the functionality they provide is complex enough, a few modules). By breaking down your app into small pieces that have very focused aims, you make it easier to test each bit in isolation (automated unit tests) and reuse the functionality elsewhere.

Now as to how to load your javascript modules, there’s a point where it makes sense to strategically load stuff based on user needs (ex: core.js is loaded by default but search.js isn’t loaded until the user accesses the “search” tab) but you can get pretty far just packaging everything into a single file (require’s r.js tool does this for you) and using the same script file (main.js) on every page.

When using a single script file, keep in mind that your js will need to work when the target of it’s functionality is not present. jQuery makes this super simple and you almost don’t have to think about it – ex:

$('#js-foo').on(...) // <-- this doesn't blow up if '#js-foo' isn't on the page. 

I’ve also seen people set a data-attr on the body tag for the page – e.g. data-page=”foo” and key js off of that:

var page = $('body').data('page');
if (page === 'foo'){
    component1.setup();
    component2.setup();
}

In your case, I would try building everything into a single file using RequireJS / AMD-style modules. Each component would get its own module file (mycomponent.js), your main.js would require() all your modules and init things appropriately, and finally you’d configure your r.js build to package everything into a single file when deploying to / running in production.

If you are interested in exploring this topic more, check out these posts:

Single Entry Point FTW
Single Entry Point Redux