Module based website organization
'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) {
}
};
'use strict';
require('./app');
require('./modules/**');
require('./features/**');
require('./views/**');
$( App.init );
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;
}());