refactor(app): code cleaned and jsdoc added

Author: Ludovic Lerus

js/app.js

@@ -1,13 +1,19 @@
-'use strict';
+const Backbone = require('backbone');
+const path = require('path');
 
-const Backbone		= require('backbone');
-const Router		= require('./js/router.js');
+const Router = require(path.resolve('js/router.js'));
 
+/**
+ * Start the app by setting the Backbone Router.
+ */
 class SocketIOTester {
+	/**
+	 * Initilize the Backbone Router.
+	 */
 	constructor() {
 		this.router = new Router();
 		Backbone.history.start();
 	}
 }
 
-const app = new SocketIOTester();
+module.exports = new SocketIOTester();

js/configStore.js

@@ -1,17 +1,33 @@
-'use strict';
+const path = require('path');
+const Configstore = require('configstore');
 
-const Configstore	= require('configstore');
-const pkg			= require(__dirname + '/../package.json');
+const pkg = require(path.resolve('package.json'));
 
+/**
+ * The ConfigStore class handle the storage of persistant datas for the app.
+ */
 class ConfigStore {
+	/**
+	 * Initialize the ConfigStore Object.
+	 */
 	constructor() {
 		this.conf = new Configstore(pkg.name);
 	}
 
+	/**
+	 * Return a value from the storage.
+	 * @param {String} name - The name of the value.
+	 * @return {Object} The value.
+	 */
 	get(name) {
 		return this.conf.get(name);
 	}
 
+	/**
+	 * Set a value associated with a name in the storage.
+	 * @param {String} name - The name.
+	 * @param {Object} value - The value.
+	 */
 	set(name, value) {
 		this.conf.set(name, value);
 	}

js/models/host.js

@@ -1,17 +1,18 @@
-'use strict';
-
 const Backbone = require('backbone');
 
+/**
+ * HostModel is a Backbone model which handle the host and the port of the socket server.
+ */
 class HostModel extends Backbone.Model {
-	constructor(data) {
-		super(data);
-	}
-
+	/**
+	 * Define the defaults values for the Model.
+	 * @return {Object} An Object with default values.
+	 */
 	defaults() {
 		return {
 			host: 'http://127.0.0.1',
-			port: 5000
-		}
+			port: 5000,
+		};
 	}
 }
 

js/router.js

@@ -1,27 +1,37 @@
-'use strict';
-
-const Backbone 			= require('backbone');
-const HomeView 			= require('./views/home.js');
-const SocketTesterView 	= require('./views/socketTester.js');
-const $					= require('jquery');
+const Backbone = require('backbone');
+const HomeView = require('./views/home.js');
+const SocketTesterView = require('./views/socketTester.js');
+const $ = require('jquery');
 
+/**
+ * The Router class handle every route of the Backbone app.
+ */
 class Router extends Backbone.Router {
+	/**
+	 * Define routes.
+	 */
 	constructor() {
 		const options = {
 			routes: {
-				'': 				'home',
-				'socket_tester':	'socketTester'
-			}
+				'':            'home',
+				socket_tester: 'socketTester',
+			},
 		};
 		super(options);
 	}
 
+	/**
+	 * Load the HomeView.
+	 */
 	home() {
 		const homeView = new HomeView();
 		homeView.render();
 		$('#view').empty().append(homeView.$el);
 	}
 
+	/**
+	 * Load the SocketTesterView.
+	 */
 	socketTester() {
 		const socketTesterView = new SocketTesterView();
 		socketTesterView.render();

js/views/home.js

@@ -1,38 +1,52 @@
-'use strict';
+const Backbone = require('backbone');
+const path = require('path');
 
-const Backbone		= require('backbone');
-const configstore	= require('./../configStore.js');
-const HostModel		= require(__dirname + '/../models/host.js');
-const validator		= require('validator');
-const View			= require('./view.js');
+const configstore = require('../configStore.js');
+const HostModel = require('../models/host.js');
+const validator	= require('validator');
+const View = require('./view.js');
 
+/**
+ * The HomeView is where we can enter the socket URL and start the connection.
+ */
 class HomeView extends View {
+	/**
+	 * Initialize datas for the HomeView.
+	 */
 	constructor() {
 		super({
 			events: {
-				'click #buttonConnection': 'clickButtonConnection'
-			}
+				'click #buttonConnection': 'clickButtonConnection',
+			},
 		});
-		this.initializeTemplate(__dirname + '/../templates/home.hbs');
+		this.initializeTemplate(path.join(__dirname, '/../templates/home.hbs'));
 		const hostConfig = configstore.get('host');
 		this.hostModel = new HostModel(hostConfig);
 	}
 
+	/**
+	 * Method called when the user click on the connection button.
+	 * @param {Object} e - The click event.
+	 */
 	clickButtonConnection(e) {
 		e.preventDefault();
 		const data = {
 			host: $('#inputHost').val(),
-			port: $('#inputPort').val()
+			port: $('#inputPort').val(),
 		};
+
 		if (validator.isURL(data.host) && (data.port.length === 0 || validator.isNumeric(data.port))) {
 			if (!data.host.startsWith('http://') && !data.host.startsWith('https://')) {
-				data.host = 'http://' + data.host;
+				data.host = `http://${data.host}`;
 			}
 			configstore.set('host', new HostModel(data));
 			Backbone.history.navigate('socket_tester', true);
 		}
 	}
 
+	/**
+	 * Render the view.
+	 */
 	render() {
 		this.$el.html(this.template(this.hostModel.toJSON()));
 	}

js/views/socketTester.js

@@ -1,27 +1,33 @@
-'use strict';
+const io = require('socket.io-client');
+const path = require('path');
 
-const configstore	= require('./../configStore.js');
-const View			= require('./view.js');
-const io			= require('socket.io-client');
+const configstore = require('../configStore.js');
+const View = require('./view.js');
 
+/**
+ * The SocketTester view where we can emit and listen socketss.
+ */
 class SocketTesterView extends View {
+	/**
+	 * Initialize datas for the SocketTesterView.
+	 */
 	constructor() {
 		super({
 			events: {
-				'click #buttonChangeStatus':			'onClickButtonChangeStatus',
-				'click #buttonSendSocket':				'onClickButtonSendSocket',
-				'click #buttonSendListen':				'onClickButtonSendListen',
-				'click #buttonRemoveOutputDiv':			'onClickButtonRemoveOutputDiv',
-				'click #buttonRemoveOutputDivListen':	'onButtonRemoveOutputDivListen',
-				'change input[type=radio]':				'onChangeInput'
-			}
+				'click #buttonChangeStatus':          'onClickButtonChangeStatus',
+				'click #buttonSendSocket':            'onClickButtonSendSocket',
+				'click #buttonSendListen':            'onClickButtonSendListen',
+				'click #buttonRemoveOutputDiv':       'onClickButtonRemoveOutputDiv',
+				'click #buttonRemoveOutputDivListen': 'onButtonRemoveOutputDivListen',
+				'change input[type=radio]':           'onChangeInput',
+			},
 		});
 
-		this.initializeTemplate(__dirname + '/../templates/socket_tester.hbs');
+		this.initializeTemplate(path.join(__dirname, '../templates/socket_tester.hbs'));
 
-		this.host	= configstore.get('host');
+		this.host = configstore.get('host');
 		if (this.host.port.length > 0) {
-			this.socket	= io(this.host.host + ':' + this.host.port);
+			this.socket	= io(`${this.host.host}:${this.host.port}`);
 		} else {
 			this.socket	= io(this.host.host);
 		}
@@ -49,13 +55,22 @@ class SocketTesterView extends View {
 		});
 	}
 
+	/**
+	 * Add a div with the result from the socket server.
+	 * @param {String} className - The name the class associated with the div.
+	 * @param {String} eventName - The name of the socket event.
+	 * @param {Object} insertBefore - Insert the div before this element.
+	 * @param {Object} data - The result from the server.
+	 * @param {Function} onRemove - A function called when the element is removed.
+	 * @return {Object} The created div.
+	 */
 	createOutput(className, eventName, insertBefore, data, onRemove) {
 		const outputDiv = $('#divOutput').clone();
 
 		outputDiv.attr('id', '');
 		outputDiv.addClass(className);
 
-		outputDiv.find('i').click(function() {
+		outputDiv.find('i').click(function () {
 			$(this).parent().remove();
 			onRemove();
 		});
@@ -71,6 +86,9 @@ class SocketTesterView extends View {
 		return outputDiv;
 	}
 
+	/**
+	 * When the user click on the button to reconnect the app to the socket server.
+	 */
 	onClickButtonChangeStatus() {
 		if (this.socket.connected) {
 			this.socket.disconnect();
@@ -79,6 +97,10 @@ class SocketTesterView extends View {
 		}
 	}
 
+	/**
+	 * When the user click on the button to emit a message.
+	 * @param {Object} e - The click event.
+	 */
 	onClickButtonSendSocket(e) {
 		e.preventDefault();
 
@@ -106,14 +128,14 @@ class SocketTesterView extends View {
 				try {
 					data = JSON.parse(data);
 				} catch (error) {
-					$('#sendInputError').show().find('ul').append('<li>' + error + '</li>');
+					$('#sendInputError').show().find('ul').append(`<li>${error}</li>`);
 				}
 			}
 		}
 
 		if (!$('#sendInputError').is(':visible')) {
-			this.socket.emit(eventName, data, (data) => {
-				this.createOutput('outputDiv', eventName, $('#buttonRemoveOutputDiv'), data, () => {
+			this.socket.emit(eventName, data, (dataReceived) => {
+				this.createOutput('outputDiv', eventName, $('#buttonRemoveOutputDiv'), dataReceived, () => {
 					if ($('.outputDiv').length === 0) {
 						$('#buttonRemoveOutputDiv').hide();
 					}
@@ -125,6 +147,10 @@ class SocketTesterView extends View {
 		}
 	}
 
+	/**
+	 * When the user click on the button to add a socket to listen.
+	 * @param {Object} e - The click event.
+	 */
 	onClickButtonSendListen(e) {
 		e.preventDefault();
 
@@ -146,24 +172,34 @@ class SocketTesterView extends View {
 				$('#buttonRemoveOutputDivListen').show();
 			}
 
-			this.socket.on(eventName, function(data) {
+			this.socket.on(eventName, (data) => {
 				outputDiv.find('p').append(JSON.stringify(data));
 				outputDiv.find('p').append('<br>');
 			});
 		}
 	}
 
+	/**
+	 * Called when the user click on the cross to remove the emit div output.
+	 */
 	onClickButtonRemoveOutputDiv() {
 		$('.outputDiv').remove();
 		$('#buttonRemoveOutputDiv').hide();
 	}
 
+	/**
+	 * Called when the user click on the cross to remove the listen div output.
+	 */
 	onButtonRemoveOutputDivListen() {
 		$('.outputDivListen').remove();
 		$('#buttonRemoveOutputDivListen').hide();
 		this.socket.removeAllListeners();
 	}
 
+	/**
+	 * Method called when the user change the data type.
+	 * @param {Object} e - The change event.
+	 */
 	onChangeInput(e) {
 		const value = $(e.currentTarget).val();
 		if (value === 'text') {
@@ -176,6 +212,9 @@ class SocketTesterView extends View {
 		$('#sendInputError').hide();
 	}
 
+	/**
+	 * Render the view.
+	 */
 	render() {
 		this.$el.html(this.template(this.host));
 	}

js/views/view.js

@@ -1,16 +1,17 @@
-'use strict';
-
-const Backbone		= require('backbone');
-const fs 			= require('fs');
-const Handlebars	= require('handlebars');
+const Backbone = require('backbone');
+const fs = require('fs');
+const Handlebars = require('handlebars');
 
+/**
+ * View is a wrapper of Backbone.View.
+ */
 class View extends Backbone.View {
-	constructor(options) {
-		super(options);
-	}
-
+	/**
+	 * Load the template file.
+	 * @param {String} templatePath - The path.
+	 */
 	initializeTemplate(templatePath) {
-		this.template = Handlebars.compile( fs.readFileSync(templatePath, 'utf8') );
+		this.template = Handlebars.compile(fs.readFileSync(templatePath, 'utf8'));
 	}
 }