Large-scale jQuery Architecture

Question

I do a lot of work on large-scale ecommerce systems. Our backend-code and html are fairly compartmentalized into large chunks based on functionality for the major sections of the system - product (browse, detail), account, checkout, etc. There are section-specific files for JS, but they are currently being concatenated and minified into a single file, to minimize HTTP requests.

In writing jQuery for our system, we are trying to determine the best way to unobtrusively associate section-specific JS with each part of our system. A few schools of thought are as follows:

1. Run functions on DOM queries even if it is known that those DOM elements may not exist in every given page / section. For example, $('.checkout-submit').doSomething(); This CSS class will most likely only exist in checkout, but if we do add it anywhere else on the site, it will automatically sync up, site-wide.

2. Create initialization functions for each major section (account, checkout, etc.), and call those init functions on the pages which require them, directly in the html. For example, $.initCheckout();

3. Remove our concatenation process, and include section-specific files only when necessary. This would reduce the core of the problem, but would add to HTTP requests, especially considering that we would then need to have an additional file for global code, libraries, etc.

Additional suggestions beyond what is listed here are more than welcome. Thanks!

Answer 1

Make your single javascript file dynamic using your server side technology of choice and then load as needed?

<script src="master.js?include=cart,main,account,common"></script>
<script src="master.js?include=main,common"></script>

This way you will keep the number of http requests down, as for minification, you can minify sections sepparately (never tried this though).

Answer 2

I'd go with option 1, but make sure you use very efficient selectors. In other words, if your checkout section is set up so that all the pages have a "checkout" class on the body, then you'd do:

$('body.checkout').find('.checkout-submit').doSomething();

The selector for "body.checkout" will be sufficiently fast that unless you've got thousands of these things you won't see a serious performance hit. (I know because I have exactly that setup on a moderate-sized site, and my page load/render times are perfectly acceptable and in fact quite fast.)

If you need to do a lot of somethings, or have lots of somethings to hook up with many elements in each section, then you can always do this:

$('body.checkout').each(function checkoutInit() {
  var $body = $(this);
  $body.find('.checkout-submit').doSomething();
  $body.find('.checkout-help').doSomething();
  $body.find('.checkout-coupon').doSomething();
  // ...
});