Seperate app in functions, init after var, modules extends module, add default destroy function

grunt_tasks/concat.js

@@ -4,7 +4,7 @@ module.exports = {
 			'www/assets/scripts/src/app/*.js',
 			'www/assets/scripts/src/templates/*.js',
 			'www/assets/scripts/src/widgets/*.js',
-			'www/assets/scripts/src/app.js'
+			'www/assets/scripts/src/App.js'
 		],
 		dest: 'www/assets/scripts/dist/app.js'
 	},

grunt_tasks/watch.js

@@ -4,7 +4,7 @@ module.exports = {
 			'www/assets/scripts/src/**/*.js',
 			'!www/assets/scripts/src/vendors/*.js'
 		],
-		tasks: ['browserify:dev', 'eslint', 'notify:javascript']
+		tasks: ['browserify:dev', 'notify:javascript']
 	},
 	javascript_vendors: {
 		files: [

package.json

@@ -3,28 +3,28 @@
   "version": "1.0.0",
   "author": "Locomotive <info@locomotive.ca>",
   "devDependencies": {
-    "autoprefixer": "6.3.1",
-    "babel-preset-es2015": "6.3.13",
+    "autoprefixer": "6.3.3",
+    "babel-preset-es2015": "6.5.0",
     "babelify": "7.2.0",
     "eslint-tap": "1.1.0",
-    "glob": "6.0.4",
+    "glob": "7.0.0",
     "grunt": "0.4.5",
     "grunt-browser-sync": "2.2.0",
     "grunt-browserify": "4.0.1",
-    "grunt-contrib-concat": "0.5.1",
+    "grunt-contrib-concat": "1.0.0",
     "grunt-contrib-cssmin": "0.14.0",
-    "grunt-contrib-jshint": "0.12.0",
-    "grunt-contrib-uglify": "0.11.0",
+    "grunt-contrib-jshint": "1.0.0",
+    "grunt-contrib-uglify": "0.11.1",
     "grunt-contrib-watch": "0.6.1",
     "grunt-csscomb": "3.1.0",
-    "grunt-eslint": "17.3.1",
+    "grunt-eslint": "18.0.0",
     "grunt-jsonlint": "1.0.7",
     "grunt-notify": "0.4.3",
     "grunt-phplint": "0.0.8",
-    "grunt-postcss": "0.7.1",
+    "grunt-postcss": "0.7.2",
     "grunt-sass": "1.1.0",
     "grunt-svgmin": "3.1.2",
-    "grunt-svgstore": "0.5.0",
+    "grunt-svgstore": "1.0.0",
     "load-grunt-tasks": "3.4.0"
   }
 }

www/assets/scripts/src/app.js

@@ -3,29 +3,25 @@
 import * as modules from './modules'
 
 class App {
-	constructor (options) {
-
-		this.elements = {
-			html: document.documentElement,
-			body: document.body
-		};
-
-		this.params = {
-			current_modules: []
-		};
-
+	constructor(options) {
 		this.modules = modules;
+		this.globals;
+		this.currentModules = [];
+	}
 
-		// Globals module
-		// ==========================================================================
-		const globals = new this.modules['Globals'];
+	// Init globals
+	// ==========================================================================
+	initGlobals() {
+		this.globals = new this.modules['Globals'];
+	}
 
+	// Init modules
+	// ==========================================================================
+	initModules() {
 		/**
 		 * @todo  [1]  Discuss storing instanciated objects
 		 * @todo  [2]  Discuss singleton concept (one off functions/declarations)
 		 */
-		// Modules
-		// ==========================================================================
 		const moduleEls = document.querySelectorAll('[data-module]');
 		for (let i = 0, elsLen = moduleEls.length; i < elsLen; i++) {
 
@@ -37,22 +33,29 @@ class App {
 			for (let j = 0, modLen = moduleAttrs.length; j < modLen; j++) {
 				let moduleAttr = moduleAttrs[j];
 
-				if (typeof this.modules[moduleAttr] === 'function' && this.params.current_modules.indexOf(moduleAttr) === -1) {
+				if (typeof this.modules[moduleAttr] === 'function' && this.currentModules.indexOf(moduleAttr) === -1) {
 					// [1,2]
 					let module = new this.modules[moduleAttr]({
 						$el: $(moduleEls[i])
 					});
 					// [2]
-					this.params.current_modules.push(module);
+					this.currentModules.push(module);
 				}
 			}
 		}
+	}
 
+	// Init
+	// ==========================================================================
+	init() {
+		this.initGlobals();
+		this.initModules();
 	}
 };
 
-// Init
+// Document ready
 // ==========================================================================
 $(function() {
 	window.app = new App();
+	window.app.init();
 });

www/assets/scripts/src/modules/Generic.js

@@ -1,13 +1,22 @@
 // ==========================================================================
 // Generic module
 // ==========================================================================
+import Module from './Module'
 
-class Generic {
-	constructor (options) {
+class Generic extends Module {
+	constructor(options) {
+		super();
         this.$el = options.$el;
+
 		console.log('Generic module');
 		console.log(this.$el);
 	}
+
+	// Destroy
+	// ==========================================================================
+	destroy() {
+		this.$el.off();
+	}
 }
 
 export default Generic;

www/assets/scripts/src/modules/Globals.js

@@ -4,7 +4,7 @@
 import Svg from './Svg';
 
 class Globals {
-	constructor () {
+	constructor() {
 		new Svg();
 	}
 }

www/assets/scripts/src/modules/Module.js

@@ -0,0 +1,13 @@
+// ==========================================================================
+// Module
+// ==========================================================================
+
+class Module {
+	constructor() {
+		this.$window = $(window);
+		this.$html = $(document.documentElement);
+		this.$body = $(document.body);
+	}
+}
+
+export default Module;

www/assets/scripts/src/modules/Svg.js

@@ -1,11 +1,20 @@
 // ==========================================================================
-// Svg
+// Svg module
 // ==========================================================================
+import Module from './Module'
+
+class Svg extends Module {
+	constructor() {
+		super();
 
-class Svg {
-	constructor () {
 		svg4everybody();
 	}
+
+	// Destroy
+	// ==========================================================================
+	destroy() {
+		this.$el.off();
+	}
 }
 
 export default Svg;

www/assets/scripts/src/modules/Title.js

@@ -1,13 +1,23 @@
 // ==========================================================================
 // Title module
 // ==========================================================================
+import Module from './Module'
 
-class Title {
-	constructor (options) {
+class Title extends Module {
+	constructor(options) {
+		super();
         this.$el = options.$el;
+
 		console.log('Title module');
 		console.log(this.$el);
 	}
+
+	// Destroy
+	// ==========================================================================
+	destroy() {
+		this.$el.off();
+	}
 }
 
 export default Title;
+ 

www/index.html

@@ -1,6 +1,6 @@
 <!doctype html>
 <!--[if lte IE 9]>     <html lang="fr" class="ie9"> <![endif]-->
-<!--[if gt IE 9]><!--> <html lang="fr" data-template="generic"> <!--<![endif]-->
+<!--[if gt IE 9]><!--> <html lang="fr"> <!--<![endif]-->
 	<head>
 		<meta charset="utf-8">
 		<meta http-equiv="X-UA-Compatible" content="IE=edge">