A reusable JavaScript base model

by - Wednesday, August 7, 2013

A base JavaScript file for starting out new projects

When building applications that require a high visual aspect, JavaScript files can become large and complicated. Understanding how to separate functional areas is key to having a well-kept and easy to read script file.

I use this file as the base JavaScript file when starting new projects. Just include this file underneath a minified JQuery reference.

The main aspects of the file are:

  • Simple structural layout splitting up main functional areas and examples of function calls within these.
  • Automatically adds screen width class to the body on initial load and when window is resized. This allows dimension targeting within selectors.
  • ‘Selectors’, ‘classes’ and ‘values’ listed at the top and can be referenced throughout the file. An example is once a ‘selector’ has been created within the file, it won’t have to be created again. The same goes for ‘classes’ and ‘values’. Creating these multiple times as variables slows the script down.
  • Separate ‘Resize’ function that is called whenever the page is resized.

Here below is the commented version of the file.

$(document).ready(function () {
    Run.Init();
});

var Run = (function () {

    return {

        //Selectors, Classes and Values referenced here.
        //These are referenced like this 'Run.Selectors.Body'.
        //'Body' is within the Array of 'Selectors' which sits within the 
        //'Run' function.
        Selectors: {
            Body: 'body',
            Header: 'header',
            Aside: 'aside',
            Sector: 'sector',
            Article: 'article',
            Footer: 'footer',
			ImageSection: 'section#images'
        },

        //Typical classes below. I usually add classes relating to animation 
        //and states such as 'open', 'closed' and 'animating'.
        Classes: {
            Desktop: 'desktop',
            Tablet: 'tablet',
            Mobile: 'mobile'
        },

        //Values of screen sizes below are standard but can be changed. I also 
        //use time values such as milliseconds for animation here.
        Values: {
            Desktop: 1024,
            Tablet: 768,
            Mobile: 767
        },

        //Run.Init() is where the top level function calls are. You would run a 
        //function checking if a certain section on a page exists and if so,
        //initialise that sections function. (line 46 is an example of this).
        Init: function () {
		    
            //Calls the function that adds a class to the body of what the 
            screen dimension is.
            DeviceType.Init();

            //When the window is resized, whatever within this function is 
            //called.
            $(window).resize(function () {
                Resize.Init();
            });
			
            //Checking if 'section#images' exists on the page. If it does, 
            //'Media.Init() is called.
		    if ($(Run.Selectors.ImageSection).length) {
				Media.Init();
			};
        }
    }
})();

//This function is called when the window resizes.
var Resize = (function () {
    return {
        Init: function () {

            DeviceType.Init();
        }
    }
})();


//This function is called within Run.Init().
var DeviceType = (function () {
    return {
        Init: function () {

            //Getting screen width then checking against 3 'if' statements.
            //Depending what value the variable 'width' is, Either 'Desktop.Init()', 
            //'Tablet.Init()' or 'Mobile.Init()' will be called.
            var width = $(window).width();

            if (width > Run.Values.Tablet) {
                Desktop.Init();
            };

            if ((width >= Run.Values.Tablet) && (width < Run.Values.Desktop)) {
                Tablet.Init();
            };

            if ((width <= Run.Values.Mobile)) {
                Mobile.Init();
            };
        }
    }
})();

//The 3 functions below are called within DeviceType.Init()
var Desktop = (function () {
    return {
        Init: function () {

            $(Run.Selectors.Body).removeClass("tablet mobile").addClass(Run.Classes.Desktop);
        }
    }
})();

var Tablet = (function () {
    return {
        Init: function () {

            $(Run.Selectors.Body).removeClass("desktop mobile").addClass(Run.Classes.Tablet);
        }
    }
})();

var Mobile = (function () {
    return {
        Init: function () {

            $(Run.Selectors.Body).removeClass("desktop tablet").addClass(Run.Classes.Mobile);
        }
    }
})();

//This function is called within Run.Init().
var Media = (function () {
    return {
        Init: function () {
            //When the body is clicked 'Media.Example()' will be called.
            $(Run.Selectors.Body).click(Media.Example);
        },
		
		Example: function () {
		    //Media.Example() has been called and an alert event has occurred.
            alert("The body has been clicked");
        }
    }
})();

Send us a comment on this article