A few projects back, I decided to rethink our JavaScript organization strategy and came up with a new technique that, I think, helps us better manage behaviors from page to page.
For years, when I needed page-specific interactions, I would either embed the JS (unobtrusively, of course) at the bottom of the page or externalize it to a separate page-specific file. In some sites, that became a difficult setup to manage because we were juggling so many files and we were also forcing our users to download each of those files individually.
Looking for a better way to manage all of the code, I built FunctionHandler. This script takes lets you declare blocks of JavaScript and then target them at pages based on the id attribute on the body element. When the targeted id is encountered, the code block is executed on DOM ready. Here’s a quick example:
| FunctionHandler.register( | |
| ['home'], | |
| function(){ | |
| alert("I'm gonna run some code here."); | |
| }); |
As you can see, using it is pretty simple: you make a call to FunctionHandler’s register method and pass it two arguments. The first is an array of the id values you want this code block to execute on and the second is an anonymous function that wraps your code block.
What we’ve found really nice about this setup is that it encourages you to create discrete JavaScript components while, at the same time, easily allowing you to adjust the pages that those components run on by simply adding to or subtracting from the id stack. You can even blanket every page with a given script by supplying a string value of “*” as the initial argument:
| FunctionHandler.register( | |
| '*', | |
| function(){ | |
| // Typekit | |
| // Google Analytics | |
| // etc. | |
| }); |
Anyway, I just wanted to take a brief moment to share this script because we’ve found it pretty handy. Perhaps you will too.
PS - FunctionHandler is available in 3 flavors: native JS, jQuery, and Prototype.
