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 ();
})();
}
});
