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.
Comments
Hi Aaron, this looks really interesting. Right now we’re using jQuery, writing everything to one file, and wrapping in all in one big DOM Ready loading function:
<code class="js">$(function() { /* ... */ });</code>Now that I’ve read your article I’m interested to see if we can manage this into our workflow. If I understand correctly this script would be used in order to allow many functions that each need to be run onDomReady on various specific pages but written to the same file to reduce load time.
Let me know if I’m incorrect in my interpretation. Also, are there any other points of using this be? clarity, load time, something else?
You’ve got it Dennis. We’ve used this new setup in about half a dozen projects over the last six months or so and we’ve found it excels for numerous reasons; organization, maintainability, and performance are probably the top three.
When we were using the technique you outlined (above), we still found the need to either a) break up page-specific functionality into individual files/embed it or b) add extra checks on each discrete function to determine whether or not it should run. FunctionHandler removes that need.
You can find the FunctionHandler approach in use on officedragon.com, brighterplanet.com, and charterforcompassion.org if you want to check out a few of our implementations.
I will definitely check them out. Thanks for the quick response.
You’ve probably heard of YUI PHP Loader, which looks like it does something similar, but on the backend:
http://developer.yahoo.com/yui/phploader/