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.
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.
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!