jQuery: Classes and Namespaces

I have been told to start using Classes and Namespacing in my jQuery code and for a new app we are building we will be making the code very simple and slick. For example the following code is used on out login page to load all the content before fading it in:

        // Hide the content and fadein the spinner
        jQuery(docume开发者_运维知识库nt).ready(function()
        {
            $('#hide').hide();
            $('body').append('<div id="loading">loading...</div>');
            $("#loading").hide();
            setTimeout($('#loading').fadeIn(), 200);
        });

        // When all content has loaded, fadeout the spinner and THEN fadein the content
        jQuery(window).load(function ()
        {
            $("#loading").fadeOut("slow", function ()
            {
                $("#loading").remove();
                clearInterval(loadingAnim);
                $("#hide").fadeIn("slow");
            });
        });

        var lastx = 0;

        var loadingAnim = setInterval(function () { UpdateSpinner("#loading", 42, 504); }, 42);

        function UpdateSpinner(target, step, width)
        {
            $(target).css("background-position", "0 " + lastx + "px");
            lastx = (lastx - step) % width;
        }

How could I make this more simple using Name spacing and classes?

Example of where I have seen this used: http://static.neow.in/js/pegasus/mainpage.js

Thanks

It doesn't sound like a jQuery specific request, but more of a use of JavaScript request. It It sounds like you are being asked to make your code more encapsulated and object oriented.

Answers on How do I declare a namespace in JavaScript? and JavaScript: Class.method vs. Class.prototype.method are a very good place to start.

You can create a global namespace and define all the members under it. This you you can avoid name conflicts in a huge application where multiple developers are working on the same application.

var myApp = {};

myApp.lastx = 0;

myApp.loadingAnim = setInterval(function () { myApp.UpdateSpinner("#loading", 42, 504); }, 42);

        myApp.UpdateSpinner = function()(target, step, width)
        {
            $(target).css("background-position", "0 " + lastx + "px");
            myApp.lastx = (lastx - step) % width;
        }

1- You can wrap your code in

jQuery(function($) { 
    /*Your code goes here */
})

instead of:

jQuery(document).ready(function() {

});

as you see is more readable.

2- You can put the following code also in the previous function, because it is only called when all the content is already loaded, this way you can have only one readable block of code:

$("#loading").fadeOut("slow", function ()
            {
                $("#loading").remove();
                clearInterval(loadingAnim);
                $("#hide").fadeIn("slow");
            });

So you can remove the:

// When all content has loaded, fadeout the spinner and THEN fadein the content
        jQuery(window).load(function ()
        {
{})

part and leave the content in the outer function.

3- If you want really make your app invulnerable to namespace problems, the best thing that you can do it's wrapping all your code between an anonymous(aka unnamed) function, as I did in the point 1 and in the next code sample:

(function( ) {  // Define an anonymous function.  No name means no global symbols
    // Code goes here
    // Any variables are safely nested within the function,
    // so no global symbols are created.
})( );          // End the function definition and invoke it.

Hope it helps you.