Hierarchical Javascript Filenames

Sunday, December 27th, 2009

I’ve been using a lot of JQuery over the last few months and have to admit to being very impressed with the core library and the vast array of third party addons for it out there.

On thing I have noticed however, and this a personal fault, is that I seem to be ending up with some very large Javascript files: files which contain so much diverse functionality that were you coding in Java or PHP or (insert your flavour of the month language here) you would NEVER store in the same file.

I know that the Javascript I’m writing needs to be more truly Object Oriented but thats a topic for another day! With Javascript (as with other languages) you can have multiple class definions via one physical file and this is the essence of the situation I have found myself in. I could go down a Java style route and produce a hierarchy of files and folders but I’ve seen a simpler approach for logically organising physical Javascript files which I like among some of the JQuery libraries. Namely: trying to use hierarchical patterns within Javascript filenames.

Example – a webform

Filestructure:
form.js (will contain a lot of init()'s)
form.validate.js
form.logic.js
form.ajax.js
etc etc

Implementation (simplified):

var form = {
    validation: null,
    logic: null,
    ajax: null,
    init: function() {
        validate.init();
        logic.init();
        ajax.init();
        form.initEventHandlers();
    }
};

Admittedly this is a simple example but even breaking up your large files into several smaller ones immediately gets you back to thinking in a more OO mode and suddenly from having a series of unmanagebly large files and complaining bitterly you are back to thinking about class hierachies, inheritance – all the good stuff.

You can leave a response, or trackback from your own site.

Tags: ,
Posted in: Development



Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>