Modularizing jQuery’s $(document).ready()

While domready-type events are a welcome addition to modern JS programming, many people abuse them by dumping all of their code in there. This keeps the script overhead of your pages high when often pages only need certain functionality. There are plenty of approaches to modularizing you initialization code, but a simple approach built off of <body> ids is my go-to method.

The first step to this approach is setting up page-specific Javascript as an object literal:

  1. var init = {
  2. common: function() {
  3. // insert common js here
  4. },
  5. home: function() {
  6. // insert js for <body id=”home”> here
  7. },
  8. // etc
  9. }

Then inside of your $(document).ready() function call your common js code and let the current body tag id dictate what code is loaded:

  1. $(document).ready(function() {
  2. // execute code common to every page
  3. init.common();
  4. // use the body’s ID to call page-specific js if it exists
  5. $.isFunction(init[document.body.id]) && init[document.body.id]();
  6. });

You’ll notice line #5 checks if the initialization function exists before calling it. This keeps you from having to make empty placeholders in your object literal for pages that don’t need anything. You could also get a lot more sophisticated by splitting each page’s JS into init, core, and teardown code or making them fire via custom events, but you get the point.