Module based website organization

app.js

var events = require('./helpers/pubsub');

(function() {
  "use strict";
  var App = {
    // this is out top level module, the module that sets up the
    // namespace and secondary level modules
    Views: {},
    Features: {},
    Modules: {},
    Helpers: {},
    Events: events,

    init: function () {

      var pageFeatures = document.body.getAttribute('data-features').split(' ');
      for (var i = 0; i < pageFeatures.length; i += 1) {
        if ( App.Features[ pageFeatures[i] ]) {
          App.Features[ pageFeatures[i] ].init();
        }
      }

      var currentView = document.body.getAttribute('data-view');
      if (currentView && App.Views[currentView]) {
        App.Views[currentView].init();
      }

      // here we are looping round all of the modules in our app.Modules object. We could have an exclude array for modules
      // that we don't want to be immediately initialised. We could initialise them later on in our application lifecycle
      for (var x in App.Modules) {
        App.Modules[x].init();
      }
       // the most useful part of this is Events. Modules shouldn't know about each other, so they're completely decoupled. We use
      // app.Events to 'trigger' and use 'on' to send/receive messages and data around our application. The 'trigger' function
      // takes data as it's second parameter which is accessible in the 'params' object in the receiving function, i.e. look at the
      // 'render' function within the 'jesse' module
      // App.Events.trigger('render');
      // App.Events2.publish('/page/load', {
      //   url: '/some/url/path',
      // });
      App.Events.publish('render');

    }
  };

  window.App = App;

}());

main.js

'use strict';

require('./app');
require('./modules/**');
require('./features/**');
require('./views/**');

$( App.init );

module.js

'use strict';

var _ = require('lodash');

App.Features.slider = {
  // this is your root DOM element for your module, a module doesn't have to be connected to the DOM, but if it is,
  // then it should control one element and everything inside it
  // el: ".view-Home",

  // this is your init function, this runs when the module is first initialised by the app (app.js)
  init: function() {
    _.bindAll(this, 'render');
    this.cacheEls();
    this.bindEvents();
  },

  bindEvents: function() {
    App.Events.subscribe('render', this.render);
  },

  cacheEls: function() {
    
  },

  render: function(event, params) {

  }

};