JS events consts and namespaces

assets/scripts/App.js

@@ -1,5 +1,5 @@
 /* jshint esnext: true */
-import { $document } from './utils/environment';
+import { APP_NAME, $document } from './utils/environment';
 
 import globals from './globals';
 
@@ -10,22 +10,31 @@ import { isFunction } from './utils/is';
 // Basic modules
 import * as modules from './modules';
 
+const MODULE_NAME = 'App';
+const EVENT_NAMESPACE = `${APP_NAME}.${MODULE_NAME}`;
+
+export const EVENT = {
+    INIT_MODULES: `initModules.${EVENT_NAMESPACE}`,
+    INIT_SCOPED_MODULES: `initScopedModules.${EVENT_NAMESPACE}`,
+    DELETE_SCOPED_MODULES: `deleteScopedModules.${EVENT_NAMESPACE}`
+};
+
 class App {
     constructor() {
         this.modules = modules;
         this.currentModules = [];
 
-        $document.on('initModules.App', (event) => {
+        $document.on(EVENT.INIT_MODULES, (event) => {
             this.initGlobals(event.firstBlood)
                 .deleteModules(event)
                 .initModules(event);
         });
 
-        $document.on('initScopedModules.App', (event) => {
+        $document.on(EVENT.INIT_SCOPED_MODULES, (event) => {
             this.initModules(event);
         });
 
-        $document.on('deleteScopedModules.App', (event) => {
+        $document.on(EVENT.DELETE_SCOPED_MODULES, (event) => {
             this.deleteModules(event);
         });
     }
@@ -145,7 +154,7 @@ class App {
 (function() {
     new App();
     $document.triggerHandler({
-        type: 'initModules.App',
+        type: EVENT.INIT_MODULES,
         firstBlood: true
     });
 })();

assets/scripts/modules/AbstractModule.js

@@ -4,10 +4,8 @@ let uid = 0;
 /**
  * Abstract Module
  */
-export default class
-{
-    constructor(options)
-    {
+export default class {
+    constructor(options) {
         this.$el = options.$el || null;
         this.el  = options.el  || null;
 
@@ -19,8 +17,7 @@ export default class
 
     init() {}
 
-    destroy()
-    {
+    destroy() {
         if (this.$el) {
             this.$el.removeData('uid')
         }

assets/scripts/modules/Example.js

@@ -1,10 +1,16 @@
 /* jshint esnext: true */
+import { APP_NAME } from '../utils/environment';
 import AbstractModule from './AbstractModule';
 
-export default class extends AbstractModule
-{
-    constructor(options)
-    {
+const MODULE_NAME = 'Example';
+const EVENT_NAMESPACE = `${APP_NAME}.${MODULE_NAME}`;
+
+const EVENT = {
+    CLICK: `click.${EVENT_NAMESPACE}`
+};
+
+export default class extends AbstractModule {
+    constructor(options) {
         super(options);
 
         // Declaration of properties
@@ -14,8 +20,8 @@ export default class extends AbstractModule
         // Set events and such
     }
 
-    destroy()
-    {
+    destroy() {
         super.destroy();
+        this.$el.off(EVENT_NAMESPACE);
     }
 }

assets/scripts/transitions/DefaultTransition.js

@@ -1,5 +1,6 @@
 /* jshint esnext: true */
-import { $document, $html } from '../utils/environment';
+import { APP_NAME, $document, $html } from '../utils/environment';
+import { EVENT as APP_EVENT } from '../App';
 
 function DefaultTransition(options) {
     options = options || {};
@@ -31,7 +32,7 @@ function DefaultTransition(options) {
             $html.attr('data-template', $el.data('template'));
 
             $document.triggerHandler({
-                type: 'initModules.App',
+                type: APP_EVENT.INIT_MODULES,
                 isBarba: true
             });
 

assets/scripts/transitions/TransitionManager.js

@@ -1,8 +1,15 @@
 /* jshint esnext: true */
-import { $document, $html, isDebug } from '../utils/environment';
+import { APP_NAME, $document, $html, isDebug } from '../utils/environment';
 
 import DefaultTransition from './DefaultTransition';
 
+const MODULE_NAME = 'TransitionManager';
+const EVENT_NAMESPACE = `${APP_NAME}.${MODULE_NAME}`;
+
+const EVENT = {
+    GOTO: `goto.${EVENT_NAMESPACE}`
+};
+
 export default class {
     constructor() {
         let clickedLink = undefined;
@@ -13,7 +20,7 @@ export default class {
             this.load()
         });
 
-        $document.on('goTo.PageTransitionManager', (event) => {
+        $document.on(EVENT.GOTO, (event) => {
             if (!window.history.pushState) {
                 window.location = event.options.location;
             } else {

assets/scripts/utils/environment.js

@@ -1,4 +1,4 @@
-const APP_NAME     = 'boilerplate';
+const APP_NAME     = 'Boilerplate';
 const DATA_API_KEY = '.data-api';
 
 const $document    = $(document);