Converting Procedural JS Code to Object I'm new to JS and trying to improve my code with the use of more organised objects.  I have the following procedural code which I have converted to an object. It does an ajax load within main. Aside from grouping the methods (functions) for better organisation, what other advantages does this approach have?  Is there any way the object version of the code can be further improved? 

Procedural approach

var main = $("main"),

    init = function() {

    },

    ajaxLoad = function(html) {
      document.title = html.match(/&lt;h1&gt;(.*?)&lt;\/h1&gt;/)[1].trim();
      main.fadeIn(200);
      init();
    },

    loadPage = function(href) {
      main.fadeOut(200, function() {
        main.load(href + " main&gt;*", ajaxLoad);
      });
    };

    init();

    $(document).on('click', 'header a', function() {
      var href = $(this).attr('href');

      if (href.indexOf(document.domain) &gt; -1 || href.indexOf(':') === -1) {
        history.pushState({}, '', href);
        loadPage(href);
        return false;
      }
    });


Object approach

var pageLoader = {

      main: $('main'),

      init: function() {},

      ajaxLoad: function(html) {
        document.title = html.match(/&lt;h1&gt;(.*?)&lt;\/h1&gt;/)[1].trim();
        pageLoader.main.fadeIn(200);
        pageLoader.init();
      },

      loadPage: function(href) {
        pageLoader.main.fadeOut(200, function() {
          pageLoader.main.load(href + " main&gt;*", pageLoader.ajaxLoad);
        });
      },

      ajaxLink: function(href) {
        if (href.indexOf(document.domain) &gt; -1 || href.indexOf(':') === -1) {
          history.pushState({}, '', href);
          pageLoader.loadPage(href);
        }
      }

    };

    pageLoader.init();

    $(document).on('click', 'header a', function() {

      var href = $(this).attr('href');
      pageLoader.ajaxLink(href);
      return false;

    });
First, I'm going to go through and do a little nitpicking.



In the procedural version, why is everything indented except for main?



When you are closing the object in the object version, the closing brace should be in the same column as the beginning line of the object.

So this:

var pageLoader = {

      ...

};                     &lt;---


Rather than this:

var pageLoader = {

      ...

    };                 &lt;---


Once you change this, you'll notice that the things inside the object are indented two indents, so I recommend knocking off one indent.



How much you are indenting is all messed up:


You are indented 8 spaces (2 indents) in the object.
You indented everything else 4 spaces (1 indent).
You indented the code inside functions 2 spaces (1/2 indent).


I recommend that you choose one and stick with it (I use 1 indent).



You don't need a return at the end of the function event listener (onclick); where is that false going to get returned to?



There is nothing inside your init functions... why are these here?



Other than that, your "translation" from procedural to object seems fine; all you basically did was stick the methods and variables in an object and add pageLoader. to the beginning of a few things.

I think that the code is good in an object because, as you said, it aids organization. However, since I don't know the full/rest of the code, I can't be sure if this is the best approach for your situation.