Using prototype to load JavaScript files

The calendar on this site only appears on pages that show blog-related information. that calendar is enhanced with JavaScript allowing you to change the month displayed by the calendar without reloading the rest of the page. so, in order to ensure that these enhancements wocould be available everywhere the calendar is, I figured I had two options:

1. Code the operation sion of the Javascript file into every page which requires it. while a good solution, and one that has worked well in the past, sometimes it can be difficult to remember or realize that you 've forgotten to include the file when you add new pages that require it.
2. Find a way to automatically include the file when it's needed. this wowould avoid the need to remember the need to include it when adding new pages that require it, but wowould result in a little more JavaScript going on when the page loads.

This past weekend, with a little help from the prototype framework, I found a solution for #2 abve which I am, for the moment, quite pleased. the following snippet assumes the most recent version of prototype as of this writing (1.6.0.2 ):

document.observe("dom:loaded", function() {    var calendar = $("calendar");    if(calendar) {        var script = new Element("script", { type: "text/javascript", src: "/path/to/calendar.js" });        document.observe("calendar:loaded", function() { new Calendar(calendar); });        $$("head")[0].insert(script);    }});

Here's, essentially, what it does:

1. Uses the customDOM: loadedEvent which, since prototype 1.6.0, determines when the Dom is ready for manipulation to call the anonymous function defined in the snippet.
2. That function attempts to get a reference to the calendar. If it can't, then nothing else happens. This makes sure that we don't include the calendar JavaScript unless we need.
3. Once we 've found a calendar:
   1. Create a new
   2. Tell the document to observeCalendar: loadedEvent, which is fired from the bottom of teh calendar's JavaScript.
   3. Insert the Javascript file into the head of the document.

It's #3.2 that is the most important step. The calendar. js file makes sure to use the prototype fire () method to create the customCalendar: loadedEvent. thus, when the browser is done inserting the necessary work required to insert the calendar. JS file, it'll fire the custom event, which will be caught by the Document Object to instantiate the newly inserted calendar.

In other words, with a creative use of prototype's event. observe () and element. fire () methods, we not only include JavaScript files only when they're needed, but also ensure that we don't attempt to use the code within those files until the browser is ready for it to be used.