Init + Module Pattern JS

module-example-2.js

//
// Revealing pattern
//
var basketModule = (function() {
    var basket = []; //private
    return { //exposed to public
        addItem: function(values) {
            basket.push(values);
        },
        getItemCount: function() {
            return basket.length;
        },
        getTotal: function(){
           var q = this.getItemCount(),p=0;
            while(q--){
                p+= basket[q].price; 
            }
            return p;
        }
    }
}());

module-example.js

/**
 * Creating a constructor with prototype properties
 * @version   0.1.0
 */
function ModuleName(n, s) {
  this.name = n;
  this.version = s;
  var config = {};
}

ModuleName.prototype.init = function(options) {
  // We can do sonething about the config array/oject here...
  this.config = $.extend(this.config, options);
  console.log(this.name)
}

ModuleName.prototype.controller = {
  saveScore:function (theScoreToAdd)  {
    this.quizScores.push(theScoreToAdd)
  },
  
  changeEmail:function (newEmail)  {
    this.email = newEmail;
    return "New Email Saved: " + this.email;
  }, 
    
  mobileMenuOutsideClick: function() {
    // we are going to do something here... 
  }
}

var module = new ModuleName('Demo', '1.0.1');
module.init({name: "Hello"});
module.controller.mobileMenuOutsideClick();
APP.util.myModule = module;

module-with-events-system.js

/**
 * Basic event handler system for modules 
 *
 * @todo Add event namespacing e.g. moduleName.eventName
 * @todo Add method to replace event 
 */
var EventsHandler = function(){
  var _triggers = {};

  this.on = function(event,callback) {
    if(!_triggers[event]){
      _triggers[event] = [];
    }
    _triggers[event].push( callback );
  }

  this.triggerHandler = function(event) {
    if( _triggers[event] ) {
      for( i in _triggers[event] )
        _triggers[event][i]();
    }
  }
};

// Initialize our events system 
events = new EventsHandler();

// Create a module interface 
class ModuleInterface extends EventsHandler
{
  constructor(){
    this.module = {};
  }
  
  init(){
  }
}

/**
 * A basic module setup with custom events 
 */
var NavigationModule = (function($, events){

	let config = {};
	
	let init = function(){
  	this.bindEvents()
  };
  
  const eventHandler = {
 		on: events.on, 
    trigger: events.triggerHandler
  };
  
  let bindEvents = function(){
  	events.on('beforeTemplateRender', function() {
      console.log('Before template render event!');
    });
    events.on('afterTemplateRender', function() {
  	  console.log('After template render event!');
	  });
  }
  
  let templateRender = function(){
  	events.triggerHandler('beforeTemplateRender');
    console.log('Rendering template');
    events.triggerHandler('afterTemplateRender');
  }

  return {
  	init: init,
    on: eventHandler.on,
    trigger: eventHandler.trigger,
  	render: templateRender
  };

})(jQuery, events);

// Initialize our module 
Navigation = NavigationModule;
Navigation.init();
// Attaching an event 
Navigation.on('afterTemplateRender', function(){
  console.log('Attached after template event...');
});
Navigation.render();

// Redefine: $, window, document, undefined.
var APP = (function($, window, document, undefined) {
// Parameters: Zepto/jQuery, window, document.
})(typeof Zepto === 'function' ? Zepto : jQuery, this, this.document);

module_pattern_init.js

// JS Module Pattern:
// http://j.mp/module-pattern

// Redefine: $, window, document, undefined.
var APP = (function($, window, document, undefined) {
  // Automatically calls all functions in APP.init
  $(document).ready(function() {
    APP.go();
  });

  // For use only inside APP.
  var PRIVATE_CONSTANT_1 = 'foo';
  var PRIVATE_CONSTANT_2 = 'bar';

  // Expose contents of APP.
  return {
    // APP.go
    go: function() {
      var i, j = this.init;

      for (i in j) {
        // Run everything in APP.init
        j.hasOwnProperty(i) && j[i]();
      }
    },
    // APP.init
    init: {
      call_automatically_one: function() {
        // Called on page-load.
        // Can still be called individually, via:
        // APP.init.call_automatically_one();
      },
      call_automatically_two: function() {
        // Called on page-load.
        // Can still be called individually, via:
        // APP.init.call_automatically_two();
      }
    },
    util: {
      call_specifically_one: function() {
        // Must be called individually, via:
        // APP.util.call_specifically_one();
      },
      call_specifically_two: function() {
        // Must be called individually, via:
        // APP.util.call_specifically_two();
      }
    }
  };
// Parameters: Zepto/jQuery, window, document.
})(typeof Zepto === 'function' ? Zepto : jQuery, this, this.document);