Creating a Modular JavaScript Toolbox

As you progress with your scripting and programming projects, you will find many places where code and concepts are identical. In cases like these, it is often beneficial to copy/paste the relevant code portions into new frameworks. In programming lingo these code snippets, usually all saved in one central folder, are known as your "toolbox." Creating and maintaining an effective toolbox is one of the most time saving techniques in programming and can reduce development time greatly.

The most important thing to remember when creating a toolbox is that the code has to work in many different instances and frameworks; you have to generalize things a little bit so it can fit into and work with any page. Because my Javascript toolbox is in need of revamping, let's take a look at the things I like to keep in it as well as the foundations for building scripts intended for future use.

As with any project the first step to creating your own toolbox is to figure out the requirements of the toolbox, basically: what functionality do you want to be able to use in multiple projects?

For me, the list looks like this:

• Modularity - the code must be modular, and the easier it is to incorporate it the faster I can build later applications.
• DHTML functions - Image swaps, color changes, rollover menus, etc...
• AJAX functions - There is a lot of common code in AJAX applications, making a custom framework will save me time.
• Calculations - Math calcs, string checking, format checking, validations, etc...
• Download & Run time - For it to be really useful it can't cost my customers time to use, or view, my applications
• Lightweight - Combining modularity with fast run times means you can "trim" out portions not being used.

When you look at the different functions I need, you may notice some overlap; image swaps can use math calculations, for example, and this is where modularity comes in.

Ideally, with a bit of work, you could write it so that only the functions you need are included in the final js - but because this may take more time than it's worth for now I suggest keeping the divisions clear but overlapping. As an exmaple: any math needed for DHTML calculations will simply be kept in the DHTML files even though there are math functions in your Calculations files which could handle the computations with ease. This way you don't have to include the whole math file for just one computation.

With all of that in mind, let's start with modularity because I have found it to be a lifesaver when it comes to development time and debugging. Here's a script that will take filenames and add them to your HEAD section as scripts on the fly. This function needs to be called from the HEAD portion of your script, and is the one of the only changes to your HTML files you'll have to make with this toolbox.

[CODE]
modules_control.js
/*
We're going to grab the handle for the HEAD element. There are multiple 
ways to do this,  but this seems the most straightforward to me. You search 
the document for the first HEAD tag and since that should be at the top of 
the file, it's good enough!
*/
var cHead = document.getElementsByTagName("head"); //This function returns a 
collection of elements, an array of 1 is still an array.
var hHead = cHead[0]; //Select the first element (remember, 0-indexed arrays 
start at 0 not 1).
function AddModule(mFileName) //Takes the Javascript file name and adds it to 
the document as a script
{
 var sTag = document.createElement("script"); //Create a SCRIPT tag
 sTag.setAttribute("src", mFileName); //Set the SCRIPT src=mFileName
 sTag.setAttribute("type", "text/javascript"); //set the SCRIPT type="text/javascript"
 hHead.appendChild(sTag); //Add it to your header section (parsed and run immediately)
}
[/CODE]

There are some advanced concepts in this snippet, and doing some reading on the DOM and document structure might help you if you don't understand some of it. To get this to work, you have to add this script directly into your html file and then call the functions. If you want, you can put the function calls in the js file and modify that each time you have a new project, then just add the script into the HTML files. It's all up to what's easier for your project.

[CODE]
addsomecode.html
<HTML>
<HEAD>
<script src="modules_control.js" type="text/javascript">
</script>
<script type="text/javascript">
AddModule("NewScript1.js");
AddModule("NewScript2.js");
AddModule("NewScriptEtc.js");
</script>
...
</HTML>
[/CODE]

Now that we have the ability to make our whole toolbox modular, and to incorporate that idea from the very start, we can build large and robust folders full of scripts and only use the ones we need at runtime making it both powerful and lightweight.

Next time we'll move on to abstracting the concepts behind DHTML and putting them all together into separate files so we can manipulate the look of our pages and create visually pleasing effects in our web sites!