A very simple modular approach.
1 - Include modulr-0.1.0.js file into the main html file (here is default.html).
<script src="modulr-0.1.0.js"></script>
2 - Create module files in modules directory. They are called by their file name.
var s, Module1 = { //The module-specific configurations settings: { numOfDivisions: 1, div1: $('#test1Div') }, //The module initialization method to start itself init: function() { s = this.settings; this.bindUIActions(); this.bindDefaultSettings(); }, //The method to set some eventful bindings bindUIActions : function() { s.div1.on('click', function() { alert('clicked div number 1'); }); }, //The method to set some default settings like style declerations bindDefaultSettings: function() { s.div1.css('cursor','pointer'); }, //One of some custom methods : createMoreDivs createMoreDivs: function() { //create more divisions... }, //One of some custom methods : getTheNumberOfDivs getTheNumberOfDivs: function() { return this.numOfDivisions(); } }
3 - At last, the views are initialized in init.js
'use strict'; var init = (function() { //Module initialization for division 2A Module1.init(); //Module initialization for division 2B Module2.init(); });