small scale web site - global javascript file style/format/pattern - improving maintainability

Posted by yaya3 on Stack Overflow See other posts from Stack Overflow or by yaya3
Published on 2010-06-10T20:17:14Z Indexed on 2010/06/11 8:02 UTC
Read the original article Hit count: 240

Filed under:
|
|

I frequently create (and inherit) small to medium websites where I have the following sort of code in a single file (normally named global.js or application.js or projectname.js).

If functions get big, I normally put them in a seperate file, and call them at the bottom of the file below in the $(document).ready() section.

If I have a few functions that are unique to certain pages, I normally have another switch statement for the body class inside the $(document).ready() section.

How could I restructure this code to make it more maintainable?

Note: I am less interested in the functions innards, more so the structure, and how different types of functions should be dealt with.

I've also posted the code here - http://pastie.org/999932 in case it makes it any easier

var ProjectNameEnvironment = {};


function someFunctionUniqueToTheHomepageNotWorthMakingConfigurable () {   
    $('.foo').hide();
    $('.bar').click(function(){
        $('.foo').show();
    });

}

function functionThatIsWorthMakingConfigurable(config) {
    var foo = config.foo || 700;
    var bar = 200;
    return foo * bar;
}


function globallyRequiredJqueryPluginTrigger (tooltip_string) {

    var tooltipTrigger = $(tooltip_string); 

    tooltipTrigger.tooltip({ 
        showURL: false
            ... 
    });
}

function minorUtilityOneLiner (selector) {
    $(selector).find('li:even').not('li ul li').addClass('even');    
}

var Lightbox = {};

Lightbox.setup = function(){
    $('li#foo a').attr('href','#alpha');
    $('li#bar a').attr('href','#beta');
}


Lightbox.init = function (config){

    if (typeof $.fn.fancybox =='function') {

        Lightbox.setup();

        var fade_in_speed = config.fade_in_speed || 1000;
        var frame_height = config.frame_height || 1700;

        $(config.selector).fancybox({ 
            frameHeight : frame_height,
            callbackOnShow: function() { 
                var content_to_load = config.content_to_load;
                    ...
            },
            callbackOnClose : function(){
                $('body').height($('body').height());
            }
        });

    } 

    else { 
        if (ProjectNameEnvironment.debug) {
            alert('the fancybox plugin has not been loaded'); 
        }
    }

}

// ---------- order of execution -----------

$(document).ready(function () {

    urls = urlConfig();

    (function globalFunctions() {

        $('.tooltip-trigger').each(function(){
            globallyRequiredJqueryPluginTrigger(this);
        });

        minorUtilityOneLiner('ul.foo')

        Lightbox.init({
            selector : 'a#a-lightbox-trigger-js',
                ...
        });

        Lightbox.init({
            selector : 'a#another-lightbox-trigger-js',
                ...
        });

    })();

    if ( $('body').attr('id') == 'home-page' ) {

        (function homeFunctions() {
             someFunctionUniqueToTheHomepageNotWorthMakingConfigurable ();
         })();

     }

});

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery