namespace

gistfile1.js

// Setup the Vsx Namespace
var Vsx = Vsx ? Vsx : new Object();

Vsx.setupNamespace = function(namespace) {
  if (Vsx[namespace] == undefined) {
      Vsx[namespace] = {}
  }

  Vsx[namespace].setElement = function(elementName, element) {
    Vsx[namespace]['$'+elementName] = $(element);
  };

  Vsx[namespace].setElements = function(elementsArray) {
    $.each(elementsArray, function(_, elementData) {
      var elementName = elementData[0];
      var element     = elementData[1];
      Vsx[namespace].setElement(elementName, element)
    });
  };
}


/* Then later on in another namespace... */

Vsx.setupNamespace('ProductForm');
$.extend(Vsx.ProductForm, {

  // Public: Call this to initialize the form. The form should be display:none,
  // and this method will show it once it is done initializing.
  //
  // options - An object literal containing the following data.
  //
  //   formContext             - Either 'new' or 'edit'
  //   clientProfile           - Either 'partner' or 'developer'
  //   maxCountText            - An alert that is displayed when too many
  //                             categories are selected.
  //   minCountText            - An alert that is displayed when not enough
  //                             categories are selected.
  //   productVersionsUrl      - String url for ProductVersions index
  //   subdivisionsUrl         - String url for Subdivisions index
  //   contentTypeDescriptions - Paragraph descriptions for the various content
  //                             types.
  //
  // No useful return value.
  init: function(options) {
    this.options = options;

    this.setElements([
      ['productVersionForm',        $('#product_version_form')],
      ['productTypeForm',           $('.product_types')],
      ['allVsxButton',              $('.product_types').find('input').first()],
      ['vsxCategories',             $('.all-vsx-solution-categories')],
      ['appManagementButton',       $('.product_types').find('input').last()],
      ['appManagementCategories',   $('.application-management-solution-categories')],
      ['contentTypeDescription',    $('.content_type_description')],
      ['contentTypeSelector',       $('.application_management_content_type_selector select')],
      ['solutionTypeCategoryGroup', $('.solution-type')],
      ['developerSolutionCheckbox', $('.developer-solution-category').siblings('input[type=checkbox]')],
      ['softwareCheckbox',          $('.software-category').siblings('input[type=checkbox]')]
    ]);

    this.addEvents();
    this.applyProductTypeState();
    this.configureForClientProfile();
    this.makeVisualTweaks();

    this.legacyInitializationCode();
    this.$productVersionForm.show();
  },

  // etc....
};

Let's make this like a module:

var superAwesomeModule = {

  // Public: Call this to initialize the form. The form should be display:none,
  // and this method will show it once it is done initializing.
  //
  // options - An object literal containing the following data.
  //
  //   formContext             - Either 'new' or 'edit'
  //   clientProfile           - Either 'partner' or 'developer'
  //   maxCountText            - An alert that is displayed when too many
  //                             categories are selected.
  //   minCountText            - An alert that is displayed when not enough
  //                             categories are selected.
  //   productVersionsUrl      - String url for ProductVersions index
  //   subdivisionsUrl         - String url for Subdivisions index
  //   contentTypeDescriptions - Paragraph descriptions for the various content
  //                             types.
  //
  // No useful return value.
  init: function(options) {
    this.options = options;

    this.setElements([
      ['productVersionForm',        $('#product_version_form')],
      ['productTypeForm',           $('.product_types')],
      ['allVsxButton',              $('.product_types').find('input').first()],
      ['vsxCategories',             $('.all-vsx-solution-categories')],
      ['appManagementButton',       $('.product_types').find('input').last()],
      ['appManagementCategories',   $('.application-management-solution-categories')],
      ['contentTypeDescription',    $('.content_type_description')],
      ['contentTypeSelector',       $('.application_management_content_type_selector select')],
      ['solutionTypeCategoryGroup', $('.solution-type')],
      ['developerSolutionCheckbox', $('.developer-solution-category').siblings('input[type=checkbox]')],
      ['softwareCheckbox',          $('.software-category').siblings('input[type=checkbox]')]
    ]);

    this.addEvents();
    this.applyProductTypeState();
    this.configureForClientProfile();
    this.makeVisualTweaks();

    this.legacyInitializationCode();
    this.$productVersionForm.show();
  },

  // etc....
};

Then we can "mixin" superAwesomeModule to anything we want

$.extend(Vsx.ProductForm, superAwesomeModule);
$.extend(My.Namespace, superAwesomeModule);

Version 1 (Using $.extend)

var Jordan = {};

$.extend(Jordan, {
  firstName: 'Jordan',
  lastName: 'Byron',
  fullName: function(){
    return this.firstName + " " + this.lastName;
  }
});

console.debug(Jordan.firstName)
//=> "Jordan"

Version 2

var Jordan = {
  firstName: 'Jordan',
  lastName: 'Byron',
  fullName: function(){
    return this.firstName + " " + this.lastName;
  }
}

console.debug(Jordan.firstName)
//=> "Jordan"

Version 3

var Jordan = {};

Jordan.firstName = 'Jordan';
Jordan.lastName = 'Byron';

Jordan.fullName = function(){
  return this.firstName + " " + this.lastName;
};

console.debug(Jordan.firstName)
//=> "Jordan"